<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 图标库 · Bootstrap 官方开源图标（icon）库</title>
<meta name="description" content="Bootstrap 官方开源图标（icon）库">
<meta name="generator" content="Hugo 0.92.1">

<link rel="canonical" href="">

<link rel="stylesheet" href="static/css/bootstrap.min6.css">
<link rel="stylesheet" href="static/css/bootstrap-icons.css"><link rel="stylesheet" href="static/css/docs2.css">

<!-- Favicons -->
<link rel="apple-touch-icon" href="https://icons.bootcss.com/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="https://icons.bootcss.com/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="https://icons.bootcss.com/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="https://icons.bootcss.com/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="https://icons.bootcss.com/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="https://icons.bootcss.com/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Bootstrap 图标库">
<meta name="twitter:description" content="Bootstrap 官方开源图标（icon）库">
<meta name="twitter:image" content="https://icons.bootcss.com/assets/img/bootstrap-icons-social.png">

<!-- Facebook -->
<meta property="og:url" content="https://icons.bootcss.com/">
<meta property="og:title" content="Bootstrap 图标库">
<meta property="og:description" content="Bootstrap 官方开源图标（icon）库">
<meta property="og:type" content="website">
<meta property="og:image" content="https://icons.bootcss.com/assets/img/bootstrap-icons-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">



  </head>
  <body id="icons-body">
    <a class="skippy visually-hidden-focusable" href="#content">
  <span class="skippy-text">Skip to main content</span>
</a>

    <header class="navbar navbar-expand-md navbar-dark bd-navbar">
  <nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
    <a class="navbar-brand p-0 me-2" href="javascript:;" aria-label="Bootstrap">
      <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block" viewbox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
    </a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
      <svg class="bi" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"></path>
      </svg>
    </button>

    <div class="collapse navbar-collapse" id="bdNavbar">
      <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
        <li class="nav-item col-6 col-md-auto">
          <a class="nav-link p-2" href="javascript:;" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">首页</a>
        </li>
        <li class="nav-item col-6 col-md-auto">
          <a class="nav-link p-2" href="javascript:;" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">中文文档</a>
        </li>
        <li class="nav-item col-6 col-md-auto">
          <a class="nav-link p-2" href="javascript:;" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">代码实例</a>
        </li>
        <li class="nav-item col-6 col-md-auto">
          <a class="nav-link p-2 active" href="" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">图标库</a>
        </li>
        <li class="nav-item col-6 col-md-auto">
          <a class="nav-link p-2" href="javascript:;" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">模板/主题</a>
        </li>
        <li class="nav-item col-6 col-md-auto">
          <a class="nav-link p-2" href="javascript:;" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">官方博客</a>
        </li>
      </ul>

      <hr class="d-md-none text-white-50">

      <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
        <li class="nav-item col-6 col-md-auto">
          <a class="nav-link p-2" href="javascript:;" target="_blank" rel="noopener">
            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewbox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"></path></svg>
            <small class="d-md-none ms-2">GitHub</small>
          </a>
        </li>
        <li class="nav-item col-6 col-md-auto">
          <a class="nav-link p-2" href="javascript:;" target="_blank" rel="noopener">
            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewbox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"></path></svg>
            <small class="d-md-none ms-2">Twitter</small>
          </a>
        </li>
        <li class="nav-item col-6 col-md-auto">
          <a class="nav-link p-2" href="javascript:;" target="_blank" rel="noopener">
            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewbox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"></path><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"></path></svg>
            <small class="d-md-none ms-2">Slack</small>
          </a>
        </li>
        <li class="nav-item col-6 col-md-auto">
          <a class="nav-link p-2" href="javascript:;" target="_blank" rel="noopener">
            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" viewbox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"></path><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"></path></svg>
            <small class="d-md-none ms-2">Open Collective</small>
          </a>
        </li>
      </ul>

      <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ms-md-3" href="javascript:;">下载</a>
    </div>
  </nav>
</header>

    <div class="hero py-5 text-center text-lg-start">
  <div class="container">
    <div class="row flex-lg-row-reverse">
      <div class="col-6 mx-auto col-lg-5 mx-lg-0">
        <img srcset="static/picture/icons-hero.png, https://icons.bootcss.com/assets/img/icons-hero@2x.png 2x" src="static/picture/icons-hero.png" class="img-fluid my-3 mx-auto" alt="Bootstrap Icons" width="450" height="340">
      </div>
      <div class="col-lg-7">
        <a class="d-block d-sm-inline-block py-1 px-3 mb-4 text-dark text-decoration-none rounded-3 hero-notice" href="javascript:;">
          <strong>v1.8.0 新增：</strong> 140+ 新图标！
        </a>
        <h1 class="f0">Bootstrap 官方图标库</h1>
        <p class="mb-4 f3 font-weight-normal">拥有 1600 多个图标的免费、高质量的开源图标库。你可以以任何方式使用它们，例如 SVG 矢量图、SVG sprite 或 web 字体形式。并不局限于使用 <a href="javascript:;">Bootstrap</a> 前端框架的项目。</p>

        <div class="fs-5 d-inline-block mb-3">
          <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap-icons</code></pre></div>
        </div>

        

        <hr class="mx-auto mx-lg-0 my-5">

        <p class="text-muted">
          Currently <a href="javascript:;">v1.8.1</a>
          <span class="px-1">&#8226;</span>
          <a href="#icons">图标列表</a>
          <span class="px-1">&#8226;</span>
          <a href="#install">安装</a>
          <span class="px-1">&#8226;</span>
          <a href="#usage">用法</a>
          <span class="px-1">&#8226;</span>
          <a href="#styling">设置样式</a>
          <span class="px-1">&#8226;</span>
          <a href="#accessibility">可访问性</a>
          <span class="px-1">&#8226;</span>
          <a href="javascript:;">GitHub 源码仓库</a>
        </p>
      </div>
    </div>
  </div>
</div>


    <main class="container" id="content">
      <div class="my-5">
  <div class="d-flex mb-4">
    <h2 id="icons" class="mb-0">图标列表</h2>
    <form class="subnav-search d-flex flex-nowrap ms-auto">
      <label for="search" class="visually-hidden">Search for icons</label>
      <input class="form-control search mb-0" id="search" placeholder="Start typing to filter..." autocomplete="off">
    </form>
  </div>
  <ul class="row row-cols-3 row-cols-sm-4 row-cols-lg-6 row-cols-xl-8 list-unstyled list">
    
      <li class="col mb-4" data-tags="numbers" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#123"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">123</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="pulse heartbeat rhythm" data-categories="data">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#activity"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">activity</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="alarm clock time" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#alarm"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">alarm</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="alarm clock time" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#alarm-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">alarm-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="space align distribute" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#align-bottom"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">align-bottom</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="space align distribute" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#align-center"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">align-center</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="space align distribute" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#align-end"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">align-end</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="space align distribute" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#align-middle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">align-middle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="space align distribute" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#align-start"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">align-start</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="space align distribute" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#align-top"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">align-top</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="key alt option" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#alt"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">alt</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="app application ios android square" data-categories="apps">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#app"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">app</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="app application ios android notification square" data-categories="apps">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#app-indicator"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">app-indicator</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="aapl mac macintosh" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#apple"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">apple</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="box delete" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#archive"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">archive</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="box delete" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#archive-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">archive-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow right-angle" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-90deg-down"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-90deg-down</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow right-angle" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-90deg-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-90deg-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow right-angle" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-90deg-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-90deg-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow right-angle" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-90deg-up"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-90deg-up</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-bar-down"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-bar-down</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-bar-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-bar-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-bar-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-bar-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-bar-up"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-bar-up</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow right spin turn around round rotate refresh reload redo" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-clockwise"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-clockwise</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow left spin turn around round rotate undo" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-counterclockwise"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-counterclockwise</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-down"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-down</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow circle" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-down-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-down-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow circle" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-down-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-down-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow circle" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-down-left-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-down-left-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow circle" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-down-left-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-down-left-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow square" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-down-left-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-down-left-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow square" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-down-left-square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-down-left-square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow circle" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-down-right-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-down-right-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow circle" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-down-right-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-down-right-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow square" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-down-right-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-down-right-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow square" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-down-right-square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-down-right-square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow square" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-down-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-down-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow square" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-down-square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-down-square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-down-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-down-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-down-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-down-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-down-short"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-down-short</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-down-up"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-down-up</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow circle" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-left-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-left-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow circle" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-left-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-left-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow square" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-left-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-left-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow square" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-left-square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-left-square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-left-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-left-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-left-short"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-left-short</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow spin turn around round rotate sync" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-repeat"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-repeat</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow return" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-return-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-return-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow return" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-return-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-return-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow circle" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-right-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-right-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow circle" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-right-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-right-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow square" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-right-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-right-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow square" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-right-square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-right-square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-right-short"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-right-short</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cupid love valentine" data-categories="arrows love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-through-heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-through-heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cupid love valentine" data-categories="arrows love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-through-heart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-through-heart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-up"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-up</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow circle" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-up-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-up-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow circle" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-up-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-up-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow circle" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-up-left-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-up-left-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow circle" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-up-left-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-up-left-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow square" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-up-left-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-up-left-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow square" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-up-left-square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-up-left-square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow circle" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-up-right-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-up-right-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow circle" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-up-right-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-up-right-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow square" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-up-right-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-up-right-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow square" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-up-right-square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-up-right-square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow square" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-up-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-up-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow square" data-categories="shape arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-up-square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-up-square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-up-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-up-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-up-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-up-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrow-up-short"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrow-up-short</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrows-angle-contract"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrows-angle-contract</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrows-angle-expand"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrows-angle-expand</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrows-collapse"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrows-collapse</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrows-expand"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrows-expand</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrows-fullscreen"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrows-fullscreen</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow cursor move" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#arrows-move"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">arrows-move</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="size resize crop dimensions" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#aspect-ratio"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">aspect-ratio</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="size resize crop dimensions" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#aspect-ratio-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">aspect-ratio-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="asterisks star" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#asterisk"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">asterisk</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mention sign" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#at"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">at</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="prize rosette" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#award"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">award</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="prize rosette" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#award-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">award-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="backward layer" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#back"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">back</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="key" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#backspace"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">backspace</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="key" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#backspace-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">backspace-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="key" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#backspace-reverse"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">backspace-reverse</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="key" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#backspace-reverse-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">backspace-reverse-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="3d display dimension" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-3d"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-3d</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="3d display dimension" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-3d-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-3d-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="4k display resolution retina" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-4k"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-4k</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="4k display resolution retina" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-4k-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-4k-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="4k display resolution retina" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-8k"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-8k</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="4k display resolution retina" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-8k-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-8k-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="advertisement" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-ad"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-ad</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="advertisement" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-ad-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-ad-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="augmented reality ar" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-ar"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-ar</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="augmented reality ar" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-ar-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-ar-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="closed captioning" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-cc"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-cc</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="closed captioning" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-cc-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-cc-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="display resolution high definition" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-hd"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-hd</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="display resolution high definition" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-hd-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-hd-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="display resolution standard definition" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-sd"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-sd</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="display resolution standard definition" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-sd-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-sd-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="trademark" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-tm"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-tm</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="trademark" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-tm-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-tm-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="voiceover accessibility" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-vo"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-vo</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="voiceover accessibility" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-vo-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-vo-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="virtual reality vr" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-vr"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-vr</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="virtual reality vr" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-vr-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-vr-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="wash closet wc" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-wc"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-wc</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="wash closet wc" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#badge-wc-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">badge-wc-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping cart purchase buy" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bag"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bag</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bag-check"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bag-check</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bag-check-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bag-check-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bag-dash"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bag-dash</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bag-dash-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bag-dash-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping cart purchase buy" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bag-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bag-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping cart purchase buy valentine love" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bag-heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bag-heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping cart purchase buy valentine love" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bag-heart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bag-heart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bag-plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bag-plus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping add cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bag-plus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bag-plus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bag-x"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bag-x</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bag-x-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bag-x-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="birthday" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#balloon"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">balloon</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="birthday" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#balloon-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">balloon-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="birthday valentine love" data-categories="real world love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#balloon-heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">balloon-heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="birthday valentine love" data-categories="real world love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#balloon-heart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">balloon-heart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="bandage health" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bandaid"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bandaid</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="bandage health" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bandaid-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bandaid-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="money finance banking market temple" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bank"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bank</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="money finance banking market temple" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bank2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bank2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chart graph analytics" data-categories="data">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bar-chart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bar-chart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chart graph analytics" data-categories="data">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bar-chart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bar-chart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chart graph analytics" data-categories="data">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bar-chart-line"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bar-chart-line</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chart graph analytics" data-categories="data">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bar-chart-line-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bar-chart-line-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chart graph analytics" data-categories="data">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bar-chart-steps"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bar-chart-steps</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#basket"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">basket</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#basket-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">basket-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#basket2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">basket2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#basket2-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">basket2-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#basket3"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">basket3</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#basket3-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">basket3-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="power charge" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#battery"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">battery</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="power charge" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#battery-charging"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">battery-charging</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="power charge" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#battery-full"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">battery-full</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="power charge" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#battery-half"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">battery-half</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#behance"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">behance</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="notification clock" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bell"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bell</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="notification clock" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bell-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bell-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="notification silenced clock" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bell-slash"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bell-slash</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="notification silenced clock" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bell-slash-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bell-slash-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="graphics vector pen" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bezier"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bezier</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="graphics vector pen" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bezier2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bezier2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="bike riding bicycling" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bicycle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bicycle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="distance view search" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#binoculars"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">binoculars</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="distance view search" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#binoculars-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">binoculars-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#blockquote-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">blockquote-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#blockquote-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">blockquote-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="wireless" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bluetooth"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bluetooth</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="content" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#body-text"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">body-text</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="novel read magazine" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#book"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">book</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="novel read magazine" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#book-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">book-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="novel read magazine" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#book-half"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">book-half</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="reading book label tag category" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bookmark"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bookmark</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="reading book label tag category" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bookmark-check"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bookmark-check</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="reading book label tag category" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bookmark-check-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bookmark-check-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="reading book label tag category" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bookmark-dash"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bookmark-dash</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="reading book label tag category" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bookmark-dash-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bookmark-dash-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="reading book label tag category" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bookmark-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bookmark-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="reading book label tag category" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bookmark-heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bookmark-heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="reading book label tag category" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bookmark-heart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bookmark-heart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="reading book label tag category" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bookmark-plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bookmark-plus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="reading book label tag category" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bookmark-plus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bookmark-plus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="reading book label tag category" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bookmark-star"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bookmark-star</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="reading book label tag category" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bookmark-star-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bookmark-star-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="reading book label tag category" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bookmark-x"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bookmark-x</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="reading book label tag category" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bookmark-x-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bookmark-x-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="reading book label tag category" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bookmarks"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bookmarks</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="reading book label tag category" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bookmarks-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bookmarks-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shelf" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bookshelf"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bookshelf</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="music" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#boombox"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">boombox</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="music" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#boombox-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">boombox-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="bootstrap" data-categories="bootstrap">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bootstrap"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bootstrap</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="bootstrap" data-categories="bootstrap">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bootstrap-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bootstrap-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="bootstrap" data-categories="bootstrap">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bootstrap-reboot"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bootstrap-reboot</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="borders" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#border"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">border</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="borders" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#border-all"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">border-all</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="borders" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#border-bottom"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">border-bottom</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="borders" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#border-center"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">border-center</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="borders" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#border-inner"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">border-inner</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="borders" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#border-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">border-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="borders" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#border-middle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">border-middle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="borders" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#border-outer"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">border-outer</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="borders" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#border-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">border-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="borders wysiwyg" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#border-style"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">border-style</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="borders" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#border-top"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">border-top</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="borders wysiwyg" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#border-width"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">border-width</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text shape resize dimensions" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bounding-box"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bounding-box</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text shape resize dimensions" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bounding-box-circles"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bounding-box-circles</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cardboard package cube" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#box"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">box</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="box arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#box-arrow-down-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">box-arrow-down-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="box arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#box-arrow-down-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">box-arrow-down-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow download save" data-categories="box arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#box-arrow-down"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">box-arrow-down</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow upload" data-categories="box arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#box-arrow-in-down"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-down</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="box arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#box-arrow-in-down-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-down-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="box arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#box-arrow-in-down-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-down-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow login signin enter" data-categories="box arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#box-arrow-in-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow login signin enter" data-categories="box arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#box-arrow-in-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="box arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#box-arrow-in-up"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-up</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="box arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#box-arrow-in-up-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-up-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="box arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#box-arrow-in-up-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-up-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow logout signout exit" data-categories="box arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#box-arrow-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">box-arrow-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow logout signout exit" data-categories="box arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#box-arrow-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">box-arrow-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow" data-categories="box arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#box-arrow-up"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">box-arrow-up</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow external link" data-categories="box arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#box-arrow-up-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">box-arrow-up-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow external link" data-categories="box arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#box-arrow-up-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">box-arrow-up-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cardboard package" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#box-seam"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">box-seam</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cardboard package cube" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#box2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">box2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cardboard package cube" data-categories="real world love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#box2-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">box2-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cardboard package cube gift valentine love" data-categories="real world love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#box2-heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">box2-heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cardboard package cube gift valentine love" data-categories="real world love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#box2-heart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">box2-heart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cube">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#boxes"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">boxes</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#braces"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">braces</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="code css" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#braces-asterisk"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">braces-asterisk</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="wall firewall" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bricks"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bricks</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="business bag baggage" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#briefcase"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">briefcase</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="business bag baggage" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#briefcase-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">briefcase-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="brightness sun weather" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#brightness-alt-high"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">brightness-alt-high</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="brightness sun weather" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#brightness-alt-high-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">brightness-alt-high-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="brightness sun weather" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#brightness-alt-low"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">brightness-alt-low</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="brightness sun weather" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#brightness-alt-low-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">brightness-alt-low-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="brightness sun weather" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#brightness-high"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">brightness-high</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="brightness sun weather" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#brightness-high-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">brightness-high-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="brightness sun weather" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#brightness-low"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">brightness-low</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="brightness sun weather" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#brightness-low-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">brightness-low-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="radio radio wave amplify wavelength" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#broadcast"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">broadcast</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="radio radio wave amplify wavelength" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#broadcast-pin"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">broadcast-pin</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="paint art" data-categories="tools">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#brush"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">brush</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="paint art" data-categories="tools">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#brush-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">brush-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="tool pail" data-categories="tools">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bucket"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bucket</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="tool pail" data-categories="tools">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bucket-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bucket-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="insect error" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bug"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bug</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="insect error" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bug-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bug-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="company enterprise organization office business" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#building"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">building</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="target" data-categories="geo">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#bullseye"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">bullseye</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="calculator math" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calculator"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calculator</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="calculator math" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calculator-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calculator-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-check"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-check</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-check-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-check-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-date"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-date</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-date-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-date-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-day"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-day</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-day-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-day-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time event invite" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-event"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-event</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time event invite" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-event-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-event-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month valentine date" data-categories="date and time love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month valentine date" data-categories="date and time love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-heart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-heart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-minus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-minus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-minus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-minus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-month"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-month</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-month-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-month-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-plus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-plus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-plus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dates timeline duration" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-range"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-range</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dates timeline duration" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-range-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-range-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dates timeline duration week" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-week"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-week</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dates timeline duration week" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-week-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-week-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month remove delete" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-x"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-x</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month remove delete" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar-x-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar-x-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-check"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-check</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-check-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-check-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-date"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-date</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-date-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-date-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-day"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-day</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-day-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-day-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time event invite" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-event"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-event</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time event invite" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-event-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-event-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month valentine date" data-categories="date and time love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month valentine date" data-categories="date and time love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-heart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-heart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-minus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-minus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-minus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-minus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-month"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-month</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-month-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-month-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-plus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-plus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-plus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dates timeline duration" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-range"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-range</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dates timeline duration" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-range-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-range-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dates timeline duration week" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-week"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-week</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dates timeline duration week" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-week-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-week-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month remove delete" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-x"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-x</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month remove delete" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar2-x-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar2-x-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar3"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar3</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time event invite" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar3-event"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar3-event</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time event invite" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar3-event-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar3-event-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar3-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar3-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dates timeline duration" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar3-range"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar3-range</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dates timeline duration" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar3-range-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar3-range-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dates timeline duration week" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar3-week"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar3-week</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dates timeline duration week" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar3-week-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar3-week-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time month" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar4"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar4</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="date time event invite" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar4-event"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar4-event</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dates timeline duration" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar4-range"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar4-range</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dates timeline duration week" data-categories="date and time">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#calendar4-week"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">calendar4-week</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="photos photography" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#camera"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">camera</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="photos photography" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#camera2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">camera2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="photos photography" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#camera-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">camera-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="av video film" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#camera-reels"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">camera-reels</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="av video film" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#camera-reels-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">camera-reels-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="av video film" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#camera-video"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">camera-video</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="av video film" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#camera-video-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">camera-video-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="av video film" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#camera-video-off"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">camera-video-off</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="av video film" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#camera-video-off-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">camera-video-off-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="key" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#capslock"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">capslock</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="key" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#capslock-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">capslock-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="note card notecard" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#card-checklist"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">card-checklist</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="note card notecard" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#card-heading"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">card-heading</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="note card notecard" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#card-image"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">card-image</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="note card notecard" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#card-list"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">card-list</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="note card notecard letter" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#card-text"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">card-text</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="caret arrow triangle" data-categories="carets">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#caret-down"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">caret-down</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="caret arrow triangle" data-categories="carets">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#caret-down-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">caret-down-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="caret arrow triangle" data-categories="carets">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#caret-down-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">caret-down-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="caret arrow triangle" data-categories="carets">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#caret-down-square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">caret-down-square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="caret arrow triangle" data-categories="carets">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#caret-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">caret-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="caret arrow triangle" data-categories="carets">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#caret-left-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">caret-left-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="caret arrow triangle" data-categories="carets">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#caret-left-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">caret-left-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="caret arrow triangle" data-categories="carets">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#caret-left-square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">caret-left-square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="caret arrow triangle" data-categories="carets">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#caret-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">caret-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="caret arrow triangle" data-categories="carets">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#caret-right-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">caret-right-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="caret arrow triangle" data-categories="carets">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#caret-right-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">caret-right-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="caret arrow triangle" data-categories="carets">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#caret-right-square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">caret-right-square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="caret arrow triangle" data-categories="carets">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#caret-up"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">caret-up</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="caret arrow triangle" data-categories="carets">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#caret-up-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">caret-up-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="caret arrow triangle" data-categories="carets">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#caret-up-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">caret-up-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="caret arrow triangle" data-categories="carets">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#caret-up-square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">caret-up-square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cart-check"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cart-check</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cart-check-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cart-check-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cart-dash"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cart-dash</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cart-dash-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cart-dash-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cart-plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cart-plus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cart-plus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cart-plus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cart-x"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cart-x</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cart-x-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cart-x-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cart2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cart2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cart3"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cart3</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shopping checkout check cart basket bag" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cart4"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cart4</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="money bills funds wallet currency" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cash"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cash</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="money finance banking currency" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cash-coin"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cash-coin</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="money bills funds wallet currency" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cash-stack"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cash-stack</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="airplay project stream display" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cast"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cast</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message typing" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-dots"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-dots</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message typing" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-dots-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-dots-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message valentine romance" data-categories="communications love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message valentine romance" data-categories="communications love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-heart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-heart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message typing" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-left-dots"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-left-dots</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message typing" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-left-dots-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-left-dots-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-left-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-left-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message valentine romance" data-categories="communications love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-left-heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-left-heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message valentine romance" data-categories="communications love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-left-heart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-left-heart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message quote" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-left-quote"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-left-quote</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message quote" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-left-quote-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-left-quote-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-left-text"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-left-text</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-left-text-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-left-text-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message quote" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-quote"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-quote</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message quote" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-quote-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-quote-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message typing" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-right-dots"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-right-dots</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message typing" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-right-dots-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-right-dots-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-right-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-right-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message valentine romance" data-categories="communications love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-right-heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-right-heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message valentine romance" data-categories="communications love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-right-heart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-right-heart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message quote" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-right-quote"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-right-quote</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message quote" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-right-quote-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-right-quote-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-right-text"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-right-text</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-right-text-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-right-text-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message typing" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-square-dots"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-square-dots</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message typing" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-square-dots-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-square-dots-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message valentine romance" data-categories="communications love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-square-heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-square-heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message valentine romance" data-categories="communications love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-square-heart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-square-heart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message quote" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-square-quote"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-square-quote</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message quote" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-square-quote-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-square-quote-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-square-text"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-square-text</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-square-text-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-square-text-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-text"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-text</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chat bubble text message" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chat-text-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chat-text-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="checkmark confirm done" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#check"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">check</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="checkmark todo done select" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#check-all"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">check-all</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="checkmark confirm done" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#check-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">check-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="checkmark confirm done" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#check-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">check-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="checkmark confirm done" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#check-lg"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">check-lg</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="checkmark confirm done" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#check-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">check-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="checkmark confirm done" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#check-square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">check-square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="checkmark todo select done checkbox" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#check2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">check2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="checkmark todo select done checkbox" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#check2-all"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">check2-all</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="checkmark todo select done checkbox" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#check2-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">check2-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="checkmark todo select done checkbox" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#check2-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">check2-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chevron" data-categories="chevrons">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chevron-bar-contract"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chevron-bar-contract</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chevron" data-categories="chevrons">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chevron-bar-down"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chevron-bar-down</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chevron" data-categories="chevrons">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chevron-bar-expand"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chevron-bar-expand</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chevron" data-categories="chevrons">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chevron-bar-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chevron-bar-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chevron" data-categories="chevrons">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chevron-bar-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chevron-bar-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chevron" data-categories="chevrons">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chevron-bar-up"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chevron-bar-up</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chevron" data-categories="chevrons">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chevron-compact-down"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chevron-compact-down</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chevron" data-categories="chevrons">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chevron-compact-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chevron-compact-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chevron" data-categories="chevrons">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chevron-compact-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chevron-compact-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chevron" data-categories="chevrons">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chevron-compact-up"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chevron-compact-up</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chevron" data-categories="chevrons">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chevron-contract"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chevron-contract</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chevron" data-categories="chevrons">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chevron-double-down"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chevron-double-down</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chevron" data-categories="chevrons">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chevron-double-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chevron-double-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chevron" data-categories="chevrons">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chevron-double-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chevron-double-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chevron" data-categories="chevrons">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chevron-double-up"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chevron-double-up</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chevron" data-categories="chevrons">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chevron-down"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chevron-down</div>
        </a>
      </li>
      <li class="col mb-4">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chevron-expand"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chevron-expand</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chevron" data-categories="chevrons">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chevron-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chevron-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chevron" data-categories="chevrons">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chevron-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chevron-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chevron" data-categories="chevrons">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#chevron-up"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">chevron-up</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#circle-half"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">circle-half</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape stop ban false" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#slash-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">slash-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="graphics vector merge layers" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#circle-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">circle-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard-check"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard-check</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard-check-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard-check-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste data analytics graph chart" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard-data"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard-data</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste data analytics graph chart" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard-data-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard-data-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard-heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard-heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard-heart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard-heart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard-minus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard-minus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard-minus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard-minus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard-plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard-plus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard-plus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard-plus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard-pulse"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard-pulse</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard-x"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard-x</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard-x-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard-x-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard2-check"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard2-check</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard2-check-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard2-check-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste data analytics graph chart" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard2-data"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard2-data</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste data analytics graph chart" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard2-data-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard2-data-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard2-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard2-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard2-heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard2-heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard2-heart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard2-heart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard2-minus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard2-minus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard2-minus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard2-minus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard2-plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard2-plus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard2-plus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard2-plus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste heartrate" data-categories="real world medical">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard2-pulse"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard2-pulse</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste heartrate" data-categories="real world medical">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard2-pulse-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard2-pulse-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard2-x"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard2-x</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="copy paste" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clipboard2-x-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clipboard2-x-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="time" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clock"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clock</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="time" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clock-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clock-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="time history" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clock-history"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clock-history</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="weather" data-categories="clouds">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="download" data-categories="clouds">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-arrow-down"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-arrow-down</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="download" data-categories="clouds">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-arrow-down-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-arrow-down-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="upload" data-categories="clouds">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-arrow-up"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-arrow-up</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="upload" data-categories="clouds">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-arrow-up-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-arrow-up-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="checkmark" data-categories="clouds">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-check"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-check</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="checkmark" data-categories="clouds">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-check-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-check-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow save" data-categories="clouds">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-download"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-download</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow save" data-categories="clouds">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-download-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-download-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="storm rain" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-drizzle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-drizzle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="storm rain" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-drizzle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-drizzle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="weather" data-categories="clouds">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="foggy" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-fog"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-fog</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="foggy" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-fog-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-fog-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="foggy" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-fog2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-fog2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="foggy" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-fog2-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-fog2-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="storm" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-hail"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-hail</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="storm" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-hail-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-hail-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="smog" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-haze"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-haze</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="smog" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-haze-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-haze-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="smog" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-haze2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-haze2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="smog" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-haze2-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-haze2-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="thunder storm" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-lightning"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-lightning</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="thunder storm" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-lightning-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-lightning-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="thunder storm" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-lightning-rain"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-lightning-rain</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="thunder storm" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-lightning-rain-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-lightning-rain-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="subtract" data-categories="clouds">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-minus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-minus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="subtract" data-categories="clouds">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-minus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-minus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cloudy overcast" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-moon"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-moon</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cloudy overcast" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-moon-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-moon-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="add new upload" data-categories="clouds">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-plus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="add new upload" data-categories="clouds">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-plus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-plus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cloud rainstorm storm" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-rain"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-rain</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cloud rainstorm storm" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-rain-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-rain-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cloud rainstorm storm" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-rain-heavy"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-rain-heavy</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cloud rainstorm storm" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-rain-heavy-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-rain-heavy-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cloud" data-categories="clouds">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-slash"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-slash</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cloud" data-categories="clouds">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-slash-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-slash-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cloud blizzard flurries" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-sleet"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-sleet</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cloud blizzard flurries" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-sleet-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-sleet-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cloud blizzard flurries" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-snow"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-snow</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cloud blizzard flurries" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-snow-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-snow-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cloudy overcast" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-sun"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-sun</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cloudy overcast" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-sun-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-sun-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cloud" data-categories="clouds">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-upload"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-upload</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cloud" data-categories="clouds">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloud-upload-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloud-upload-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="clouds overcast" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clouds"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clouds</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="clouds overcast" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#clouds-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">clouds-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="clouds overcast" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloudy"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloudy</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="clouds overcast" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cloudy-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cloudy-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#code"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">code</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#code-slash"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">code-slash</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type preformatted" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#code-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">code-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="money finance banking currency" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#coin"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">coin</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="library group" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#collection"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">collection</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="library group" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#collection-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">collection-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="library group play" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#collection-play"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">collection-play</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="library group play" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#collection-play-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">collection-play-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="grid layout" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#columns"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">columns</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="grid layout" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#columns-gap"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">columns-gap</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="key mac" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#command"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">command</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="direction map location" data-categories="geo">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#compass"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">compass</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="direction map location" data-categories="geo">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#compass-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">compass-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="construction warning safety" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cone"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cone</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="construction warning safety" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cone-striped"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cone-striped</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="game gaming video-game" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#controller"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">controller</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="processor chip computer" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cpu"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cpu</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="processor chip computer" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cpu-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cpu-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="debit card payment" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#credit-card"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">credit-card</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="debit card payment" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#credit-card-2-back"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">credit-card-2-back</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="debit card payment" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#credit-card-2-back-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">credit-card-2-back-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="debit card payment" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#credit-card-2-front"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">credit-card-2-front</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="debit card payment" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#credit-card-2-front-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">credit-card-2-front-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="debit card payment" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#credit-card-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">credit-card-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="crop" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#crop"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">crop</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mug" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cup"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cup</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mug" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cup-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cup-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mug glass drink" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cup-straw"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cup-straw</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="money finance crypto" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#currency-bitcoin"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">currency-bitcoin</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="money finance usd" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#currency-dollar"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">currency-dollar</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="money finance" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#currency-euro"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">currency-euro</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="money finance" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#currency-exchange"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">currency-exchange</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="money finance" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#currency-pound"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">currency-pound</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="money finance" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#currency-yen"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">currency-yen</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="pointer" data-categories="geo">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cursor"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cursor</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="pointer" data-categories="geo">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cursor-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cursor-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type cursor" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#cursor-text"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">cursor-text</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="minus" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dash"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dash</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="minus" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dash-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dash-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="minus" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dash-circle-dotted"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dash-circle-dotted</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="minus" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dash-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dash-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="minus" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dash-lg"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dash-lg</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="minus" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dash-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dash-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="minus" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dash-square-dotted"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dash-square-dotted</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="minus" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dash-square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dash-square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="drive hard drive" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#device-hdd"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">device-hdd</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="drive hard drive" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#device-hdd-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">device-hdd-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="solid state drive" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#device-ssd"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">device-ssd</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="solid state drive" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#device-ssd-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">device-ssd-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="node diagram sitemap children org chart" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#diagram-2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">diagram-2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="node diagram sitemap children org chart" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#diagram-2-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">diagram-2-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="node diagram sitemap children org chart" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#diagram-3"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">diagram-3</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="node diagram sitemap children org chart" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#diagram-3-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">diagram-3-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#diamond"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">diamond</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#diamond-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">diamond-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#diamond-half"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">diamond-half</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dice die games gaming gambling" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dice-1"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dice-1</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dice die games gaming gambling" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dice-1-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dice-1-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dice die games gaming gambling" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dice-2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dice-2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dice die games gaming gambling" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dice-2-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dice-2-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dice die games gaming gambling" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dice-3"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dice-3</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dice die games gaming gambling" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dice-3-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dice-3-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dice die games gaming gambling" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dice-4"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dice-4</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dice die games gaming gambling" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dice-4-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dice-4-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dice die games gaming gambling" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dice-5"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dice-5</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dice die games gaming gambling" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dice-5-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dice-5-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dice die games gaming gambling" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dice-6"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dice-6</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dice die games gaming gambling" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dice-6-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dice-6-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cd compact disc bluray dvd" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#disc"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">disc</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cd compact disc bluray dvd" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#disc-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">disc-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social chat" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#discord"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">discord</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="monitor external" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#display"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">display</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="monitor external" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#display-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">display-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="video input" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#displayport"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">displayport</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="video input" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#displayport-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">displayport-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="space align" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#distribute-horizontal"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">distribute-horizontal</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="space align" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#distribute-vertical"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">distribute-vertical</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="door logout signout" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#door-closed"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">door-closed</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="door logout signout" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#door-closed-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">door-closed-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="door login signin" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#door-open"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">door-open</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="door login signin" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#door-open-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">door-open-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="middot" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dot"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dot</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow network save" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#download"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">download</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="gaming controller direction" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dpad"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dpad</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="gaming controller direction" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dpad-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dpad-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#dribbble"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">dribbble</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="water-drop paint ink liquid" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#droplet"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">droplet</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="water-drop paint ink liquid" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#droplet-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">droplet-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="water-drop paint ink liquid" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#droplet-half"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">droplet-half</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="hearing sound listen" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#ear"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">ear</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="hearing sound listen" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#ear-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">ear-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="headphones" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#earbuds"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">earbuds</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="paint draw art present" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#easel"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">easel</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="paint draw art present" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#easel-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">easel-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="paint draw art present" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#easel2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">easel2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="paint draw art present" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#easel2-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">easel2-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="paint draw art present" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#easel3"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">easel3</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="paint draw art present" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#easel3-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">easel3-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="food" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#egg"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">egg</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="food" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#egg-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">egg-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="food" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#egg-fried"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">egg-fried</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="disc cd dvd" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#eject"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">eject</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="disc cd dvd" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#eject-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">eject-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon anger upset" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-angry"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-angry</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon anger upset" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-angry-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-angry-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-dizzy"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-dizzy</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-dizzy-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-dizzy-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon neutral unphased" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-expressionless"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-expressionless</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon neutral unphased" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-expressionless-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-expressionless-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon sad" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-frown"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-frown</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon sad" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-frown-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-frown-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon heart love" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-heart-eyes"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-heart-eyes</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon heart love" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-heart-eyes-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-heart-eyes-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon heart love" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-kiss"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-kiss</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon heart love" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-kiss-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-kiss-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon happy" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-laughing"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-laughing</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon happy" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-laughing-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-laughing-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon expressionless" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-neutral"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-neutral</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon expressionless" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-neutral-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-neutral-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon happy" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-smile"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-smile</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon happy" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-smile-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-smile-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon sarcasm" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-smile-upside-down"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-smile-upside-down</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon sarcasm" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-smile-upside-down-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-smile-upside-down-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon cool" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-sunglasses"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-sunglasses</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon cool" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-sunglasses-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-sunglasses-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-wink"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-wink</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="emoticon" data-categories="emoji">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#emoji-wink-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">emoji-wink-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-check"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-check</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-check-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-check-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-dash"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-dash</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-dash-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-dash-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-exclamation"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-exclamation</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-exclamation-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-exclamation-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter love valentine romance" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter love valentine romance" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-heart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-heart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-open"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-open</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-open-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-open-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter love valentine romance" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-open-heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-open-heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter love valentine romance" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-open-heart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-open-heart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-paper"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-paper</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-paper-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-paper-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter love valentine romance" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-paper-heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-paper-heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter love valentine romance" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-paper-heart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-paper-heart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-plus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-plus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-plus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-slash"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-slash</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-slash-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-slash-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-x"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-x</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="email message mail letter" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#envelope-x-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">envelope-x-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="erase remove" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#eraser"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">eraser</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="erase remove" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#eraser-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">eraser-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="internet connection port plug" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#ethernet"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">ethernet</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="alert warning" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#exclamation"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">exclamation</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="alert warning" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#exclamation-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">exclamation-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="alert warning" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#exclamation-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">exclamation-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="alert warning" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#exclamation-diamond"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">exclamation-diamond</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="alert warning" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#exclamation-diamond-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">exclamation-diamond-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="alert warning" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#exclamation-lg"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">exclamation-lg</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="alert warning" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#exclamation-octagon"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">exclamation-octagon</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="alert warning" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#exclamation-octagon-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">exclamation-octagon-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="alert warning" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#exclamation-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">exclamation-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="alert warning" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#exclamation-square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">exclamation-square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="alert warning" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#exclamation-triangle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">exclamation-triangle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="alert warning" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#exclamation-triangle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">exclamation-triangle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="graphics vector merge layers" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#exclude"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">exclude</div>
        </a>
      </li>
      <li class="col mb-4" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#explicit"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">explicit</div>
        </a>
      </li>
      <li class="col mb-4" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#explicit-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">explicit-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="eyeball look see" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#eye"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">eye</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="eyeball look see" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#eye-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">eye-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="eyeball look see" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#eye-slash"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">eye-slash</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="eyeball look see" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#eye-slash-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">eye-slash-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="color picker" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#eyedropper"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">eyedropper</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="eyeball look see glasses reading" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#eyeglasses"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">eyeglasses</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#facebook"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">facebook</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="fan vent airflow" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#fan"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">fan</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document download" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-arrow-down"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-arrow-down</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document download" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-arrow-down-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-arrow-down-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document upload" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-arrow-up"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-arrow-up</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document upload" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-arrow-up-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-arrow-up-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document data chart" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-bar-graph"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-bar-graph</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document data chart" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-bar-graph-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-bar-graph-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document binary source" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-binary"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-binary</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document binary source" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-binary-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-binary-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document page-break" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-break"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-break</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document page-break" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-break-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-break-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document check verified" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-check"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-check</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document check verified" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-check-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-check-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document code development" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-code"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-code</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document code development" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-code-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-code-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document version development" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-diff"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-diff</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document version development" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-diff-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-diff-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document download" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-arrow-down"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-arrow-down</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document download" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-arrow-down-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-arrow-down-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document upload" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-arrow-up"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-arrow-up</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document upload" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-arrow-up-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-arrow-up-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document data chart" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-bar-graph"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-bar-graph</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document data chart" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-bar-graph-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-bar-graph-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document binary source" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-binary"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-binary</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document binary source" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-binary-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-binary-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document page-break" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-break"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-break</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document page-break" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-break-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-break-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document check verified" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-check"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-check</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document check verified" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-check-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-check-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document code development" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-code"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-code</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document code development" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-code-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-code-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document version development" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-diff"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-diff</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document version development" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-diff-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-diff-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="slides presentation powerpoint keynote" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-easel"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-easel</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="slides presentation powerpoint keynote" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-easel-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-easel-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document spreadsheet excel table" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-excel"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-excel</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document spreadsheet excel table" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-excel-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-excel-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="ttf otf" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-font"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-font</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="ttf otf" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-font-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-font-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="photo picture" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-image"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-image</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="photo picture" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-image-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-image-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="lock private secure" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-lock"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-lock</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="lock private secure" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-lock-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-lock-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="lock private secure" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-lock2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-lock2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="lock private secure" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-lock2-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-lock2-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document medical hospital health" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-medical"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-medical</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document medical hospital health" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-medical-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-medical-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document delete remove" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-minus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-minus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document delete remove" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-minus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-minus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document music audio playlist songs" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-music"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-music</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document music audio playlist songs" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-music-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-music-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document adobe acrobat" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-pdf"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-pdf</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document adobe acrobat" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-pdf-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-pdf-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document personal cv resume about" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-person"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-person</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document personal cv resume about" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-person-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-person-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="video present" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-play"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-play</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="video present" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-play-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-play-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document add new" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-plus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document add new" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-plus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-plus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document post" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-post"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-post</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document post" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-post-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-post-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="slides presentation powerpoint keynote" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-ppt"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-ppt</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="slides presentation powerpoint keynote" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-ppt-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-ppt-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text doc document" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-richtext"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-richtext</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text doc document" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-richtext-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-richtext-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-ruled"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-ruled</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-ruled-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-ruled-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="presentation keynote powerpoint" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-slides"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-slides</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="presentation keynote powerpoint" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-slides-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-slides-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document excel table" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-spreadsheet"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-spreadsheet</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document excel table" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-spreadsheet-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-spreadsheet-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-text"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-text</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-text-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-text-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-word"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-word</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-word-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-word-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="document remove delete" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-x"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-x</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="document remove delete" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-x-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-x-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document zip archive compress" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-zip"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-zip</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document zip archive compress" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-earmark-zip-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-earmark-zip-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="slides presentation powerpoint keynote" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-easel"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-easel</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="slides presentation powerpoint keynote" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-easel-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-easel-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document spreadsheet excel table" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-excel"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-excel</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document spreadsheet excel table" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-excel-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-excel-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="ttf otf" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-font"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-font</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="ttf otf" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-font-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-font-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="photo picture" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-image"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-image</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="photo picture" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-image-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-image-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="lock private secure" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-lock"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-lock</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="lock private secure" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-lock-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-lock-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="lock private secure" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-lock2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-lock2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="lock private secure" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-lock2-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-lock2-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document medical hospital health" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-medical"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-medical</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document medical hospital health" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-medical-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-medical-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document delete remove" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-minus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-minus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document delete remove" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-minus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-minus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document music audio playlist songs" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-music"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-music</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document music audio playlist songs" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-music-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-music-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document adobe acrobat" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-pdf"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-pdf</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document adobe acrobat" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-pdf-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-pdf-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document personal cv resume about" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-person"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-person</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document personal cv resume about" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-person-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-person-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="video present" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-play"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-play</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="video present" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-play-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-play-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document add new" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-plus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document add new" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-plus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-plus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document post" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-post"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-post</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document post" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-post-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-post-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="slides presentation powerpoint keynote" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-ppt"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-ppt</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="slides presentation powerpoint keynote" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-ppt-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-ppt-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document richtext" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-richtext"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-richtext</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document richtext" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-richtext-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-richtext-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-ruled"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-ruled</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-ruled-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-ruled-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="presentation keynote powerpoint" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-slides"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-slides</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="presentation keynote powerpoint" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-slides-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-slides-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document excel table" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-spreadsheet"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-spreadsheet</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document excel table" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-spreadsheet-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-spreadsheet-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document letter" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-text"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-text</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document letter" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-text-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-text-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-word"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-word</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-word-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-word-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="document remove delete" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-x"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-x</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="document remove delete" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-x-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-x-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document zip archive compress" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-zip"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-zip</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document zip archive compress" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#file-zip-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">file-zip-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#files"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">files</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="doc document" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#files-alt"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">files-alt</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-aac"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-aac</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-ai"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-ai</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-bmp"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-bmp</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension code" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-cs"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-cs</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension code stylesheet" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-css"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-css</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-csv"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-csv</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-doc"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-doc</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-docx"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-docx</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-exe"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-exe</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-gif"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-gif</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-heic"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-heic</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension code html" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-html"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-html</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension code java" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-java"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-java</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-jpg"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-jpg</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension code javascript" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-js"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-js</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension code javascript" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-json"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-json</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension code javascript react" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-jsx"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-jsx</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension keynote" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-key"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-key</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-m4p"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-m4p</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension code markdown" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-md"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-md</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-mdx"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-mdx</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-mov"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-mov</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-mp3"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-mp3</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-mp4"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-mp4</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension font type" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-otf"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-otf</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-pdf"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-pdf</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension code" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-php"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-php</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-png"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-png</div>
        </a>
      </li>
      <li class="col mb-4">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-ppt"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-ppt</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-pptx"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-pptx</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-psd"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-psd</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension code python" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-py"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-py</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-raw"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-raw</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension code ruby" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-rb"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-rb</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension code css stylesheet" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-sass"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-sass</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension code css stylesheet" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-scss"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-scss</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension code shell" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-sh"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-sh</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension code" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-svg"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-svg</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-tiff"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-tiff</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension code typescript" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-tsx"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-tsx</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension font type" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-ttf"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-ttf</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-txt"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-txt</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-wav"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-wav</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension font type" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-woff"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-woff</div>
        </a>
      </li>
      <li class="col mb-4">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-xls"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-xls</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-xlsx"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-xlsx</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension code" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-xml"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-xml</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file file type extension code yaml" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filetype-yml"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filetype-yml</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="video movie" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#film"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">film</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="sort" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filter"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filter</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="sort filter organize" data-categories="sort and filter">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filter-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filter-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="sort filter organize" data-categories="sort and filter">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filter-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filter-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="sort filter organize" data-categories="sort and filter">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filter-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filter-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="sort filter organize" data-categories="sort and filter">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filter-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filter-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="sort filter organize" data-categories="sort and filter">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filter-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filter-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="sort filter organize" data-categories="sort and filter">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#filter-square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">filter-square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="touch ID secure biometric" data-categories="security">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#fingerprint"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">fingerprint</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="report" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#flag"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">flag</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="report" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#flag-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">flag-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="plant bloom flower" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#flower1"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">flower1</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="plant bloom flower" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#flower2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">flower2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="plant bloom flower" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#flower3"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">flower3</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="directory" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#folder"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">folder</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="directory check verified" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#folder-check"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">folder-check</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="directory" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#folder-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">folder-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="directory delete remove" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#folder-minus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">folder-minus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="directory delete add new" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#folder-plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">folder-plus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="directory symbolic-link" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#folder-symlink"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">folder-symlink</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="directory symbolic-link" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#folder-symlink-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">folder-symlink-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="directory remove delete" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#folder-x"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">folder-x</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="directory" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#folder2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">folder2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="directory" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#folder2-open"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">folder2-open</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#fonts"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">fonts</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mail email" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#forward"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">forward</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mail email" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#forward-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">forward-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="forward layer" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#front"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">front</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="window maximize" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#fullscreen"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">fullscreen</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="window minimize" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#fullscreen-exit"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">fullscreen-exit</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="sort filter" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#funnel"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">funnel</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="sort filter" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#funnel-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">funnel-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="tool settings preferences" data-categories="tools">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#gear"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">gear</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="tool settings preferences" data-categories="tools">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#gear-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">gear-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="tool settings preferences" data-categories="tools">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#gear-wide"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">gear-wide</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="tool settings preferences" data-categories="tools">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#gear-wide-connected"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">gear-wide-connected</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape diamond" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#gem"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">gem</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="gender identity" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#gender-ambiguous"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">gender-ambiguous</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="gender identity" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#gender-female"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">gender-female</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="gender identity" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#gender-male"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">gender-male</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="gender identity" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#gender-trans"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">gender-trans</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="geography map pin location" data-categories="geo">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#geo"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">geo</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="geography map pin location" data-categories="geo">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#geo-alt"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">geo-alt</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="geography map pin location" data-categories="geo">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#geo-alt-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">geo-alt-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="geography map pin location" data-categories="geo">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#geo-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">geo-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="present gift" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#gift"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">gift</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="present gift" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#gift-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">gift-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="version control vcs github version" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#git"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">git</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social microsoft" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#github"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">github</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="world translate global international" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#globe"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">globe</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="world translate global international" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#globe2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">globe2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social search" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#google"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">google</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="video output graphics" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#gpu-card"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">gpu-card</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chart graph analytics" data-categories="data">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#graph-down"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">graph-down</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chart graph analytics" data-categories="data">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#graph-down-arrow"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">graph-down-arrow</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chart graph analytics" data-categories="data">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#graph-up"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">graph-up</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chart graph analytics" data-categories="data">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#graph-up-arrow"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">graph-up-arrow</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="grid layout" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#grid"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">grid</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="grid layout" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#grid-1x2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">grid-1x2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="grid layout" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#grid-1x2-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">grid-1x2-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="grid layout" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#grid-3x2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">grid-3x2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="grid layout" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#grid-3x2-gap"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">grid-3x2-gap</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="grid layout" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#grid-3x2-gap-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">grid-3x2-gap-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="grid layout" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#grid-3x3"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">grid-3x3</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="grid layout" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#grid-3x3-gap"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">grid-3x3-gap</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="grid layout" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#grid-3x3-gap-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">grid-3x3-gap-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="grid layout" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#grid-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">grid-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="drag grab" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#grip-horizontal"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">grip-horizontal</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="drag grab" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#grip-vertical"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">grip-vertical</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="tool" data-categories="tools">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hammer"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hammer</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="hand pointer cursor" data-categories="hands">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hand-index"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hand-index</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="hand pointer cursor" data-categories="hands">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hand-index-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hand-index-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="hand pointer cursor" data-categories="hands">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hand-index-thumb"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hand-index-thumb</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="hand pointer cursor" data-categories="hands">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hand-index-thumb-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hand-index-thumb-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="hand pointer thumbs-down -1" data-categories="hands">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hand-thumbs-down"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hand-thumbs-down</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="hand pointer thumbs-down -1" data-categories="hands">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hand-thumbs-down-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hand-thumbs-down-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="hand pointer thumbs-up &#43;1" data-categories="hands">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hand-thumbs-up"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hand-thumbs-up</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="hand pointer thumbs-up &#43;1" data-categories="hands">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hand-thumbs-up-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hand-thumbs-up-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="purse tote" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#handbag"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">handbag</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="purse tote" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#handbag-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">handbag-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hash"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hash</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="hard drive hard disk ssd drive server" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hdd"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hdd</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="hard drive hard disk ssd drive server" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hdd-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hdd-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="hard drive hard disk ssd drive server" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hdd-network"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hdd-network</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="hard drive hard disk ssd drive server" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hdd-network-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hdd-network-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="hard drive hard disk ssd drive server" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hdd-rack"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hdd-rack</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="hard drive hard disk ssd drive server" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hdd-rack-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hdd-rack-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="hard drive hard disk ssd drive server" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hdd-stack"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hdd-stack</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="hard drive hard disk ssd drive server" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hdd-stack-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hdd-stack-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="video input" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hdmi"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hdmi</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="video input" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hdmi-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hdmi-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="headphones" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#headphones"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">headphones</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="headphones microphone" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#headset"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">headset</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="virual reality oculus hololens" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#headset-vr"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">headset-vr</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="love favorite" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="romance cupid valentine" data-categories="love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#heart-arrow"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">heart-arrow</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="love favorite" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#heart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">heart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="love favorite" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#heart-half"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">heart-half</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="heartbeat" data-categories="medical">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#heart-pulse"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">heart-pulse</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="heartbeat" data-categories="medical">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#heart-pulse-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">heart-pulse-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="love valentine romance" data-categories="emoji love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#heartbreak"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">heartbreak</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="love valentine romance" data-categories="emoji love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#heartbreak-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">heartbreak-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="romance valentine" data-categories="love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hearts"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hearts</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape polygon" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#heptagon"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">heptagon</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape polygon" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#heptagon-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">heptagon-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape polygon" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#heptagon-half"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">heptagon-half</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape polygon" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hexagon"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hexagon</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape polygon" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hexagon-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hexagon-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape polygon" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hexagon-half"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hexagon-half</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="health emergency room" data-categories="medical">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hospital"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hospital</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="health emergency room" data-categories="medical">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hospital-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hospital-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="time history wait sand clock" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hourglass"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hourglass</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="time history wait sand clock" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hourglass-bottom"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hourglass-bottom</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="time history wait sand clock" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hourglass-split"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hourglass-split</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="time history wait sand clock" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hourglass-top"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hourglass-top</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="home" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#house"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">house</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="home" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#house-door"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">house-door</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="home" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#house-door-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">house-door-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="home" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#house-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">house-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="home love romance" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#house-heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">house-heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="home love romance" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#house-heart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">house-heart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="divider horizonal-rule" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hr"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hr</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="storm" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hurricane"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hurricane</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="hypnosis sleepy" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#hypnotize"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">hypnotize</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="picture photo" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#image"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">image</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="picture photo" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#image-alt"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">image-alt</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="picture photo" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#image-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">image-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="picture photo" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#images"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">images</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mail email letter tray" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#inbox"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">inbox</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mail email letter tray" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#inbox-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">inbox-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mail email letter tray" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#inboxes-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">inboxes-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mail email letter tray" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#inboxes"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">inboxes</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="private investigator secret" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#incognito"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">incognito</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="math infinite" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#infinity"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">infinity</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="information help" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#info"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">info</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="information help" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#info-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">info-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="information help" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#info-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">info-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="information help" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#info-lg"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">info-lg</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="information help" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#info-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">info-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="information help" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#info-square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">info-square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="textarea form input" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#input-cursor"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">input-cursor</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="textarea form input" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#input-cursor-text"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">input-cursor-text</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social chat" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#instagram"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">instagram</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="graphics vector merge layers" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#intersect"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">intersect</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file folder journal notebook" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#journal"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">journal</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file folder journal notebook" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#journal-album"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">journal-album</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file folder journal notebook" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#journal-arrow-down"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">journal-arrow-down</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file folder journal notebook" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#journal-arrow-up"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">journal-arrow-up</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file folder journal notebook" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#journal-bookmark"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">journal-bookmark</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file folder journal notebook" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#journal-bookmark-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">journal-bookmark-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file folder journal notebook" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#journal-check"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">journal-check</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file folder journal notebook" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#journal-code"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">journal-code</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file folder journal notebook" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#journal-medical"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">journal-medical</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file folder journal notebook" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#journal-minus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">journal-minus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file folder journal notebook" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#journal-plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">journal-plus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file folder journal notebook" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#journal-richtext"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">journal-richtext</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file folder journal notebook" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#journal-text"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">journal-text</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file folder journal notebook remove delete" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#journal-x"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">journal-x</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="file folder journal notebook" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#journals"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">journals</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="gaming game video games" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#joystick"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">joystick</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type justify alignment" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#justify"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">justify</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type justify alignment" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#justify-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">justify-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type justify alignment" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#justify-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">justify-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="board project-management" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#kanban"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">kanban</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="board project-management" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#kanban-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">kanban-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="lock secure" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#key"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">key</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="lock secure" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#key-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">key-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="keyboard keys typing" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#keyboard"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">keyboard</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="keyboard keys typing" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#keyboard-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">keyboard-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="climb ladder" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#ladder"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">ladder</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="light lamp" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#lamp"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">lamp</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="light lamp" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#lamp-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">lamp-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="computer" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#laptop"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">laptop</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="computer" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#laptop-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">laptop-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrange layers back" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#layer-backward"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">layer-backward</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrange layers front" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#layer-forward"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">layer-forward</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="perspective stacked" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#layers"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">layers</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="perspective stacked" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#layers-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">layers-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="perspective stacked" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#layers-half"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">layers-half</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="grid layout sidebar" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#layout-sidebar"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">layout-sidebar</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="layout columns" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#layout-sidebar-inset-reverse"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">layout-sidebar-inset-reverse</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="layout columns" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#layout-sidebar-inset"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">layout-sidebar-inset</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="grid layout sidebar" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#layout-sidebar-reverse"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">layout-sidebar-reverse</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="grid layout sidebar" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#layout-split"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">layout-split</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="layout columns" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#layout-text-sidebar"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">layout-text-sidebar</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="layout columns" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#layout-text-sidebar-reverse"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">layout-text-sidebar-reverse</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="layout columns" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#layout-text-window"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">layout-text-window</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="layout columns" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#layout-text-window-reverse"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">layout-text-window-reverse</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="layout columns" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#layout-three-columns"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">layout-three-columns</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="layout broken" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#layout-wtf"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">layout-wtf</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="lifesaver water" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#life-preserver"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">life-preserver</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="lights lamp" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#lightbulb"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">lightbulb</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="lights lamp" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#lightbulb-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">lightbulb-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="lights lamp" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#lightbulb-off"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">lightbulb-off</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="lights lamp" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#lightbulb-off-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">lightbulb-off-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="storm thunder bolt" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#lightning"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">lightning</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="weather storm thunder bolt" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#lightning-charge"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">lightning-charge</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="weather storm thunder bolt" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#lightning-charge-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">lightning-charge-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="storm thunder bolt" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#lightning-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">lightning-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#line"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">line</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="anchor hyperlink href" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#link"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">link</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="anchor hyperlink href" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#link-45deg"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">link-45deg</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social microsoft" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#linkedin"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">linkedin</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type justify alignment menu hamburger" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#list"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">list</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type justify alignment checklist done" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#list-check"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">list-check</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type alignment" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#list-columns"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">list-columns</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type alignment" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#list-columns-reverse"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">list-columns-reverse</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type alignment children" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#list-nested"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">list-nested</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type justify alignment ordered-list numbered-list numbered" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#list-ol"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">list-ol</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type starred" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#list-stars"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">list-stars</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type justify alignment todos task" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#list-task"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">list-task</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type justify alignment unordered-list" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#list-ul"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">list-ul</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="privacy security" data-categories="security">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#lock"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">lock</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="privacy security" data-categories="security">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#lock-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">lock-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="magic stick" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#magic"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">magic</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="magnetic" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#magnet"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">magnet</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="magnetic" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#magnet-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">magnet-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="post postal postbox letterbox" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#mailbox"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">mailbox</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="post postal postbox letterbox" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#mailbox2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">mailbox2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="geography directions location" data-categories="geo">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#map"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">map</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="geography directions location" data-categories="geo">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#map-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">map-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="markdown md content writing" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#markdown"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">markdown</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="markdown md content writing" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#markdown-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">markdown-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mask" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#mask"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">mask</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#mastodon"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">mastodon</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#medium"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">medium</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="loudspeaker announcement" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#megaphone"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">megaphone</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="loudspeaker announcement" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#megaphone-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">megaphone-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="ram" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#memory"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">memory</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dropdown menu context app ui" data-categories="controls">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#menu-app"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">menu-app</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dropdown menu context app ui" data-categories="controls">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#menu-app-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">menu-app-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dropdown menu context app ui" data-categories="controls">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#menu-button"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">menu-button</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dropdown menu context app ui" data-categories="controls">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#menu-button-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">menu-button-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dropdown menu context app ui" data-categories="controls">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#menu-button-wide"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">menu-button-wide</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dropdown menu context app ui" data-categories="controls">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#menu-button-wide-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">menu-button-wide-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dropdown menu context app ui" data-categories="controls">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#menu-down"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">menu-down</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dropdown menu context app ui" data-categories="controls">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#menu-up"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">menu-up</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social facebook chat" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#messenger"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">messenger</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="facebook fb" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#meta"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">meta</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av sound input microphone" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#mic"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">mic</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av sound input microphone" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#mic-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">mic-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av sound input microphone" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#mic-mute"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">mic-mute</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av sound input microphone" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#mic-mute-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">mic-mute-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="msft windows" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#microsoft"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">microsoft</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mining cart" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#minecart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">minecart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mining cart" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#minecart-loaded"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">minecart-loaded</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="internet cable" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#modem"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">modem</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="internet cable" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#modem-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">modem-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="water droplets" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#moisture"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">moisture</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="lunar weather night" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#moon"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">moon</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="night sky" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#moon-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">moon-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="night sky" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#moon-stars"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">moon-stars</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="night sky" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#moon-stars-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">moon-stars-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="graduation cap" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#mortarboard"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">mortarboard</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="graduation cap" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#mortarboard-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">mortarboard-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mobo computer hardware" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#motherboard"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">motherboard</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mobo computer hardware" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#motherboard-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">motherboard-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mice input" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#mouse"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">mouse</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mice input" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#mouse-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">mouse-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mice input" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#mouse2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">mouse2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mice input" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#mouse2-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">mouse2-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mice input" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#mouse3"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">mouse3</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mice input" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#mouse3-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">mouse3-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="music notes audio sound" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#music-note"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">music-note</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="music notes audio sound" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#music-note-beamed"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">music-note-beamed</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="music notes audio sound playlist library" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#music-note-list"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">music-note-list</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="ipod mp3" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#music-player"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">music-player</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="ipod mp3" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#music-player-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">music-player-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="news paper" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#newspaper"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">newspaper</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="gaming" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#nintendo-switch"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">nintendo-switch</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="add new node diagram" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#node-minus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">node-minus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="add new node diagram" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#node-minus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">node-minus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="add new node diagram" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#node-plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">node-plus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="add new node diagram" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#node-plus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">node-plus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="nut bolt hexagon tools" data-categories="tools">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#nut"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">nut</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="nut bolt hexagon tools" data-categories="tools">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#nut-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">nut-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape polygon" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#octagon"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">octagon</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape polygon" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#octagon-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">octagon-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape polygon" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#octagon-half"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">octagon-half</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="port plug sound" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#optical-audio"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">optical-audio</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="port plug sound" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#optical-audio-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">optical-audio-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="key mac" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#option"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">option</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="plug power" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#outlet"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">outlet</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="color paint fill palette" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#paint-bucket"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">paint-bucket</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="color paint fill palette" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#palette"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">palette</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="color paint fill palette" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#palette-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">palette-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="color paint fill palette" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#palette2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">palette2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="attachment" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#paperclip"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">paperclip</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="paragraph text body content" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#paragraph"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">paragraph</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="verified checkmark certified" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#patch-check"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">patch-check</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="verified checkmark certified" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#patch-check-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">patch-check-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="excited certified" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#patch-exclamation"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">patch-exclamation</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="excited certified" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#patch-exclamation-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">patch-exclamation-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#patch-minus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">patch-minus</div>
        </a>
      </li>
      <li class="col mb-4" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#patch-minus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">patch-minus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#patch-plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">patch-plus</div>
        </a>
      </li>
      <li class="col mb-4" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#patch-plus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">patch-plus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#patch-question"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">patch-question</div>
        </a>
      </li>
      <li class="col mb-4" data-categories="badges">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#patch-question-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">patch-question-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pause"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pause</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pause-btn"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pause-btn</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pause-btn-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pause-btn-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pause-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pause-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pause-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pause-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pause-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pause-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#paypal"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">paypal</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="computer workstation desktop" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pc"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pc</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="computer workstation desktop" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pc-display"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pc-display</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="computer workstation desktop" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pc-display-horizontal"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pc-display-horizontal</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="computer workstation desktop" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pc-horizontal"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pc-horizontal</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="card expansion" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pci-card"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pci-card</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="peace love" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#peace"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">peace</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="peace love" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#peace-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">peace-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="edit write ballpoint" data-categories="tools">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pen"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pen</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="edit write ballpoint" data-categories="tools">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pen-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pen-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="edit write" data-categories="tools">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pencil"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pencil</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="edit write" data-categories="tools">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pencil-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pencil-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="edit write" data-categories="tools">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pencil-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pencil-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape polygon" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pentagon"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pentagon</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape polygon" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pentagon-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pentagon-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape polygon" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pentagon-half"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pentagon-half</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="humans organization avatar users" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#people"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">people</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="humans organization avatar user account" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="humans organization avatar users" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#people-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">people-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="percentage math fraction" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#percent"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">percent</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="human individual avatar user account" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="human individual avatar user badge id card account" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person-badge"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person-badge</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="human individual avatar user badge id card account" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person-badge-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person-badge-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="human individual avatar user crop account" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person-bounding-box"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person-bounding-box</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="human individual avatar user verified account" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person-check"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person-check</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="human individual avatar user verified account" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person-check-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person-check-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="human individual avatar user remove delete account" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person-dash"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person-dash</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="human individual avatar user remove delete account" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person-dash-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person-dash-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="human individual avatar user account" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="human individual avatar user account love valentine romance" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person-heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person-heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="human individual avatar user account love valentine romance" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person-hearts"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person-hearts</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="human individual avatar user contact list account" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person-lines-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person-lines-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="human individual avatar user new add account" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person-plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person-plus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="human individual avatar user new add account" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person-plus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person-plus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="human individual avatar user account contact" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person-rolodex"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person-rolodex</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="human individual avatar user account" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="human individual avatar user wfh" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person-video"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person-video</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="human individual avatar user wfh" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person-video2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person-video2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="human individual avatar user wfh" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person-video3"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person-video3</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="human individual avatar user wfh" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person-workspace"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person-workspace</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="human individual avatar user remove delete account" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person-x"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person-x</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="human individual avatar user remove delete account" data-categories="people">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#person-x-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">person-x-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mobile telephone" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#phone"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">phone</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mobile telephone" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#phone-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">phone-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mobile telephone" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#phone-flip"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">phone-flip</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mobile telephone" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#phone-landscape"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">phone-landscape</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mobile telephone" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#phone-landscape-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">phone-landscape-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mobile telephone haptic" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#phone-vibrate"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">phone-vibrate</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mobile telephone haptic" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#phone-vibrate-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">phone-vibrate-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chart graph analytics" data-categories="data">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pie-chart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pie-chart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="chart graph analytics" data-categories="data">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pie-chart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pie-chart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="money finance banking savings" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#piggy-bank"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">piggy-bank</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="money finance banking savings" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#piggy-bank-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">piggy-bank-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="pushpin thumbtack" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pin"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pin</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="pushpin thumbtack" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pin-angle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pin-angle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="pushpin thumbtack" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pin-angle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pin-angle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="pushpin thumbtack" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pin-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pin-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="geography map pin location" data-categories="geo">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pin-map"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pin-map</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="geography map pin location" data-categories="geo">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pin-map-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pin-map-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pinterest"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pinterest</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="picture tv television display nested" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pip"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pip</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="picture tv television display nested" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#pip-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">pip-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#play"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">play</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#play-btn"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">play-btn</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#play-btn-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">play-btn-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#play-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">play-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#play-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">play-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#play-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">play-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="sony gaming" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#playstation"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">playstation</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="power outlet" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#plug"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">plug</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="power outlet" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#plug-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">plug-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="addon software" data-categories="ui">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#plugin"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">plugin</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="add new" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">plus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="add new" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#plus-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">plus-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="add new" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#plus-circle-dotted"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">plus-circle-dotted</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="add new" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#plus-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">plus-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="add new" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#plus-lg"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">plus-lg</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="difference add subtract" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#plus-slash-minus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">plus-slash-minus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="add new" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#plus-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">plus-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="add new" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#plus-square-dotted"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">plus-square-dotted</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="add new" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#plus-square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">plus-square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="stamp shipping" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#postage"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">postage</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mail stamp shipping" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#postage-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">postage-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mail stamp love valentine romance" data-categories="real world love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#postage-heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">postage-heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mail stamp love valentine romance" data-categories="real world love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#postage-heart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">postage-heart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mail letter" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#postcard"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">postcard</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mail letter" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#postcard-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">postcard-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mail letter love valentine romance" data-categories="real world love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#postcard-heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">postcard-heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mail letter love valentine romance" data-categories="real world love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#postcard-heart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">postcard-heart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="false true" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#power"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">power</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="print" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#printer"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">printer</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="print" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#printer-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">printer-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="projection present screen" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#projector"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">projector</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="projection present screen" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#projector-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">projector-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="puzzle piece" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#puzzle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">puzzle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="puzzle piece" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#puzzle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">puzzle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="scan" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#qr-code"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">qr-code</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="scan" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#qr-code-scan"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">qr-code-scan</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="help" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#question"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">question</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="help" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#question-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">question-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="help" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#question-diamond"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">question-diamond</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="help" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#question-diamond-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">question-diamond-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="help" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#question-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">question-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="help" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#question-lg"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">question-lg</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="help" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#question-octagon"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">question-octagon</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="help" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#question-octagon-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">question-octagon-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="help" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#question-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">question-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="help" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#question-square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">question-square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#quora"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">quora</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="blockquote quotes quotation" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#quote"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">quote</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="radiation nuclear danger" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#radioactive"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">radioactive</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="colors arches" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#rainbow"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">rainbow</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="receipt invoice sale purchase bill" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#receipt"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">receipt</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="receipt invoice sale purchase bill" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#receipt-cutoff"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">receipt-cutoff</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="reception cellphone mobile carrier network signal" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#reception-0"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">reception-0</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="reception cellphone mobile carrier network signal" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#reception-1"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">reception-1</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="reception cellphone mobile carrier network signal" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#reception-2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">reception-2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="reception cellphone mobile carrier network signal" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#reception-3"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">reception-3</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="reception cellphone mobile carrier network signal" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#reception-4"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">reception-4</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#record"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">record</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#record-btn"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">record-btn</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#record-btn-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">record-btn-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#record-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">record-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#record-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">record-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#record-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">record-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#record2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">record2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#record2-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">record2-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="recyling trash" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#recycle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">recycle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#reddit"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">reddit</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mail email" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#reply"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">reply</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mail email" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#reply-all"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">reply-all</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mail email" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#reply-all-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">reply-all-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mail email" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#reply-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">reply-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="bot" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#robot"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">robot</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="wifi internet wireless" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#router"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">router</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="wifi internet wireless" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#router-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">router-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="atom feed xml" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#rss"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">rss</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="atom feed xml" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#rss-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">rss-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="measure guide" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#rulers"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">rulers</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="vault bank finance" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#safe"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">safe</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="vault bank finance" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#safe-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">safe-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="vault bank finance" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#safe2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">safe2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="vault bank finance" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#safe2-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">safe2-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="save floppy" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#save"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">save</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="save floppy" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#save-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">save-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="save floppy" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#save2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">save2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="save floppy" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#save2-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">save2-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cut shears" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#scissors"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">scissors</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="tool" data-categories="tools">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#screwdriver"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">screwdriver</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="storage microsd chip memory" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sd-card"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sd-card</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="storage microsd chip memory" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sd-card-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sd-card-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="magnifying-glass look" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#search"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">search</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="magnifying-glass look love romance valentine" data-categories="communications love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#search-heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">search-heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="magnifying-glass look love romance valentine" data-categories="communications love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#search-heart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">search-heart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="nav tabs tabbed app ui" data-categories="controls">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#segmented-nav"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">segmented-nav</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="message sending sent" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#send"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">send</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="message sending sent" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#send-check"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">send-check</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="message sending sent" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#send-check-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">send-check-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="message sending sent" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#send-dash"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">send-dash</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="message sending sent" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#send-dash-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">send-dash-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="message sending sent" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#send-exclamation"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">send-exclamation</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="message sending sent" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#send-exclamation-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">send-exclamation-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="message sending sent" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#send-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">send-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="message sending sent" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#send-plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">send-plus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="message sending sent" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#send-plus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">send-plus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="message sending sent" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#send-slash"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">send-slash</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="message sending sent" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#send-slash-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">send-slash-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="message sending sent" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#send-x"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">send-x</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="message sending sent" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#send-x-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">send-x-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="server network" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#server"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">server</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="share link" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#share"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">share</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="share link" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#share-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">share-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="privacy security" data-categories="security">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#shield"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">shield</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="privacy security" data-categories="security">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#shield-check"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">shield-check</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="privacy security" data-categories="security">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#shield-exclamation"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">shield-exclamation</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="privacy security" data-categories="security">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#shield-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">shield-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="privacy security" data-categories="security">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#shield-fill-check"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">shield-fill-check</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="privacy security" data-categories="security">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#shield-fill-exclamation"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">shield-fill-exclamation</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="privacy security" data-categories="security">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#shield-fill-minus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">shield-fill-minus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="privacy security" data-categories="security">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#shield-fill-plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">shield-fill-plus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="privacy security remove delete" data-categories="security">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#shield-fill-x"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">shield-fill-x</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="privacy security lock" data-categories="security">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#shield-lock"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">shield-lock</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="privacy security lock" data-categories="security">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#shield-lock-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">shield-lock-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="privacy security" data-categories="security">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#shield-minus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">shield-minus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="privacy security" data-categories="security">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#shield-plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">shield-plus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="privacy security" data-categories="security">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#shield-shaded"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">shield-shaded</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shield badge" data-categories="security">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#shield-slash"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">shield-slash</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shield badge" data-categories="security">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#shield-slash-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">shield-slash-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="privacy security remove delete" data-categories="security">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#shield-x"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">shield-x</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="key" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#shift"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">shift</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="key" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#shift-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">shift-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shop store market marketplace shopping retail" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#shop"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">shop</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shop store market marketplace shopping retail" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#shop-window"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">shop-window</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shuffle random" data-categories="arrows">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#shuffle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">shuffle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#signal"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">signal</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="milestone sign road sign street sign directions" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#signpost"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">signpost</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="milestone sign road sign street sign directions" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#signpost-2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">signpost-2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="milestone sign road sign street sign directions" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#signpost-2-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">signpost-2-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="milestone sign road sign street sign directions" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#signpost-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">signpost-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="milestone sign road sign street sign directions" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#signpost-split"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">signpost-split</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="milestone sign road sign street sign directions" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#signpost-split-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">signpost-split-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mobile carrier" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sim"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sim</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mobile carrier" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sim-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sim-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-backward"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-backward</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-backward-btn"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-backward-btn</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-backward-btn-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-backward-btn-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-backward-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-backward-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-backward-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-backward-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-backward-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-backward-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-end"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-end</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-end-btn"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-end-btn</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-end-btn-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-end-btn-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-end-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-end-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-end-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-end-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-end-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-end-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-forward"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-forward</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-forward-btn"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-forward-btn</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-forward-btn-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-forward-btn-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-forward-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-forward-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-forward-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-forward-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-forward-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-forward-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-start"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-start</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-start-btn"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-start-btn</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-start-btn-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-start-btn-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-start-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-start-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-start-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-start-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skip-start-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skip-start-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social microsoft" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#skype"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">skype</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#slack"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">slack</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape stop ban false" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#slash"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">slash</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape stop ban false" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#slash-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">slash-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape stop ban false" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#slash-lg"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">slash-lg</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape stop ban false" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#slash-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">slash-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape stop ban false" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#slash-square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">slash-square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="equalizer settings preferences dials" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sliders"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sliders</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="equalizer settings preferences dials" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sliders2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sliders2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="equalizer settings preferences dials" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sliders2-vertical"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sliders2-vertical</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="watch wearables" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#smartwatch"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">smartwatch</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#snapchat"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">snapchat</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="blizzard flurries" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#snow"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">snow</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="blizzard flurries" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#snow2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">snow2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="blizzard flurries" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#snow3"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">snow3</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="sort filter organize" data-categories="sort and filter">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sort-alpha-down"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sort-alpha-down</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="sort filter organize" data-categories="sort and filter">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sort-alpha-down-alt"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sort-alpha-down-alt</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="sort filter organize" data-categories="sort and filter">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sort-alpha-up"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sort-alpha-up</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="sort filter organize" data-categories="sort and filter">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sort-alpha-up-alt"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sort-alpha-up-alt</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="sort filter organize" data-categories="sort and filter">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sort-down"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sort-down</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="sort filter organize" data-categories="sort and filter">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sort-down-alt"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sort-down-alt</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="sort filter organize" data-categories="sort and filter">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sort-numeric-down"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sort-numeric-down</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="sort filter organize" data-categories="sort and filter">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sort-numeric-down-alt"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sort-numeric-down-alt</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="sort filter organize" data-categories="sort and filter">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sort-numeric-up"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sort-numeric-up</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="sort filter organize" data-categories="sort and filter">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sort-numeric-up-alt"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sort-numeric-up-alt</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="sort filter organize" data-categories="sort and filter">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sort-up"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sort-up</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="sort filter organize" data-categories="sort and filter">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sort-up-alt"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sort-up-alt</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio sound wave" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#soundwave"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">soundwave</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio sound" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#speaker"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">speaker</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio sound" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#speaker-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">speaker-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="speed tachometer dashboard" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#speedometer"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">speedometer</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="speed tachometer dashboard" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#speedometer2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">speedometer2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="spelling grammar" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#spellcheck"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">spellcheck</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#spotify"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">spotify</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape rectangle" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape rectangle" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape rectangle" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#square-half"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">square-half</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="layers" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#stack"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">stack</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#stack-overflow"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">stack-overflow</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape like favorite" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#star"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">star</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape like favorite" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#star-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">star-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape like favorite" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#star-half"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">star-half</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="clear skies night" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#stars"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">stars</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="gaming" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#steam"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">steam</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="postit note sticky" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#stickies"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">stickies</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="postit note sticky" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#stickies-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">stickies-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="postit note sticky" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sticky"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sticky</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="postit note sticky" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sticky-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sticky-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#stop"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">stop</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#stop-btn"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">stop-btn</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#stop-btn-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">stop-btn-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#stop-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">stop-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#stop-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">stop-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#stop-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">stop-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="traffic lights intersection" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#stoplights"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">stoplights</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="traffic lights intersection" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#stoplights-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">stoplights-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="time timer clock" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#stopwatch"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">stopwatch</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="time timer clock" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#stopwatch-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">stopwatch-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#strava"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">strava</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="graphics vector merge layers" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#subtract"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">subtract</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="card cards suit deck gambling" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#suit-club"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">suit-club</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="card cards suit deck gambling" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#suit-club-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">suit-club-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="card cards suit deck gambling" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#suit-diamond"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">suit-diamond</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="card cards suit deck gambling" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#suit-diamond-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">suit-diamond-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="card cards suit deck gambling" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#suit-heart"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">suit-heart</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="card cards suit deck gambling" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#suit-heart-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">suit-heart-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="card cards suit deck gambling" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#suit-spade"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">suit-spade</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="card cards suit deck gambling" data-categories="entertainment">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#suit-spade-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">suit-spade-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="solar weather" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sun"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sun</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="solar weather" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sun-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sun-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shades cool aviators" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sunglasses"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sunglasses</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dawn" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sunrise"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sunrise</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dawn" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sunrise-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sunrise-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dusk" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sunset"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sunset</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="dusk" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#sunset-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">sunset-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="align orientation mirror" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#symmetry-horizontal"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">symmetry-horizontal</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="align orientation mirror" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#symmetry-vertical"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">symmetry-vertical</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="spreadsheet" data-categories="files and folders">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#table"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">table</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mobile" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#tablet"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">tablet</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mobile" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#tablet-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">tablet-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mobile" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#tablet-landscape"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">tablet-landscape</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="mobile" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#tablet-landscape-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">tablet-landscape-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="price category taxonomy label" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#tag"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">tag</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="price category taxonomy label" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#tag-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">tag-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="price category taxonomy label" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#tags"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">tags</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="price category taxonomy label" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#tags-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">tags-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social chat" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#telegram"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">telegram</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="telephone phone call" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#telephone"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">telephone</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="telephone phone call" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#telephone-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">telephone-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="telephone phone call" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#telephone-forward"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">telephone-forward</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="telephone phone call" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#telephone-forward-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">telephone-forward-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="telephone phone call" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#telephone-inbound"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">telephone-inbound</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="telephone phone call" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#telephone-inbound-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">telephone-inbound-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="telephone phone call" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#telephone-minus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">telephone-minus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="telephone phone call" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#telephone-minus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">telephone-minus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="telephone phone call" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#telephone-outbound"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">telephone-outbound</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="telephone phone call" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#telephone-outbound-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">telephone-outbound-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="telephone phone call" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#telephone-plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">telephone-plus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="telephone phone call" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#telephone-plus-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">telephone-plus-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="telephone phone call" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#telephone-x"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">telephone-x</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="telephone phone call" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#telephone-x-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">telephone-x-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="command-line cli command-prompt" data-categories="apps">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#terminal"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">terminal</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="command-line cli command-prompt" data-categories="apps">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#terminal-dash"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">terminal-dash</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="command-line cli command-prompt" data-categories="apps">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#terminal-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">terminal-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="command-line cli command-prompt" data-categories="apps">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#terminal-plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">terminal-plus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="command-line cli command-prompt" data-categories="apps">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#terminal-split"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">terminal-split</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="command-line cli command-prompt" data-categories="apps">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#terminal-x"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">terminal-x</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type justify alignment" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#text-center"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">text-center</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type justify alignment" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#text-indent-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">text-indent-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type justify alignment" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#text-indent-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">text-indent-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type justify alignment" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#text-left"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">text-left</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type paragraph copy" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#text-paragraph"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">text-paragraph</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type justify alignment" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#text-right"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">text-right</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text insert bounding-box" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#textarea"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">textarea</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text form" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#textarea-resize"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">textarea-resize</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text insert bounding-box" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#textarea-t"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">textarea-t</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="temperature weather" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#thermometer"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">thermometer</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="temperature weather" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#thermometer-half"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">thermometer-half</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="temperature weather" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#thermometer-high"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">thermometer-high</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="temperature weather" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#thermometer-low"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">thermometer-low</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="temperature weather" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#thermometer-snow"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">thermometer-snow</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="temperature weather" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#thermometer-sun"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">thermometer-sun</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="meatballs more ellipsis overflow menu" data-categories="controls">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#three-dots"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">three-dots</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="kebab more ellipsis overflow menu" data-categories="controls">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#three-dots-vertical"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">three-dots-vertical</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="plug port" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#thunderbolt"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">thunderbolt</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="plug port" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#thunderbolt-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">thunderbolt-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="tickets admission" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#ticket"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">ticket</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="tickets admission" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#ticket-detailed"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">ticket-detailed</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="tickets admission" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#ticket-detailed-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">ticket-detailed-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="tickets admission" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#ticket-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">ticket-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="tickets admission" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#ticket-perforated"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">ticket-perforated</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="tickets admission" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#ticket-perforated-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">ticket-perforated-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#tiktok"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">tiktok</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="toggle switch checkbox" data-categories="controls">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#toggle-off"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">toggle-off</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="toggle switch checkbox" data-categories="controls">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#toggle-on"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">toggle-on</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="toggle switch checkbox" data-categories="controls">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#toggle2-off"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">toggle2-off</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="toggle switch checkbox" data-categories="controls">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#toggle2-on"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">toggle2-on</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="toggle switch checkbox" data-categories="controls">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#toggles"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">toggles</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="toggle switch checkbox" data-categories="controls">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#toggles2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">toggles2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="tool wrench screwdriver" data-categories="tools">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#tools"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">tools</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="wind" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#tornado"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">tornado</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="translation languages language" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#translate"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">translate</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="trash-can garbage delete" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#trash"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">trash</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="trash-can garbage delete" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#trash-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">trash-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="trash-can garbage delete" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#trash2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">trash2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="trash-can garbage delete" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#trash2-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">trash2-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="trash-can garbage delete" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#trash3"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">trash3</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="trash-can garbage delete" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#trash3-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">trash3-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="tree forrest" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#tree"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">tree</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="tree forrest" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#tree-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">tree-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#triangle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">triangle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#triangle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">triangle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="shape" data-categories="shapes">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#triangle-half"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">triangle-half</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="prize winning" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#trophy"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">trophy</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="prize winning" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#trophy-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">trophy-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="hurricane" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#tropical-storm"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">tropical-storm</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="trucking shipping shipment transport deliver delivery" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#truck"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">truck</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="trucking shipping shipment transport deliver delivery" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#truck-flatbed"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">truck-flatbed</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="wave" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#tsunami"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">tsunami</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="television monitor display" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#tv"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">tv</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="television monitor display" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#tv-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">tv-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#twitch"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">twitch</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social chat" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#twitter"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">twitter</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#type"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">type</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#type-bold"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">type-bold</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type heading" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#type-h1"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">type-h1</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type heading" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#type-h2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">type-h2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type heading" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#type-h3"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">type-h3</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#type-italic"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">type-italic</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#type-strikethrough"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">type-strikethrough</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="text type" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#type-underline"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">type-underline</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="checkbox form" data-categories="controls">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#ui-checks"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">ui-checks</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="checkbox form" data-categories="controls">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#ui-checks-grid"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">ui-checks-grid</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="radio form" data-categories="controls">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#ui-radios"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">ui-radios</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="radio form" data-categories="controls">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#ui-radios-grid"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">ui-radios-grid</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="rain" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#umbrella"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">umbrella</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="rain" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#umbrella-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">umbrella-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="graphics vector merge layers" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#union"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">union</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="privacy security" data-categories="security">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#unlock"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">unlock</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="privacy security" data-categories="security">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#unlock-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">unlock-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="purchase barcode" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#upc"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">upc</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="purchase barcode" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#upc-scan"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">upc-scan</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="arrow network" data-categories="miscellaneous">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#upload"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">upload</div>
        </a>
      </li>
      <li class="col mb-4" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#usb"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">usb</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="port plug" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#usb-c"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">usb-c</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="port plug" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#usb-c-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">usb-c-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="thumb-drive" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#usb-drive"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">usb-drive</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="thumb-drive" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#usb-drive-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">usb-drive-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="port plug" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#usb-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">usb-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="port plug" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#usb-micro"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">usb-micro</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="port plug" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#usb-micro-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">usb-micro-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="port plug" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#usb-mini"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">usb-mini</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="port plug" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#usb-mini-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">usb-mini-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#usb-plug"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">usb-plug</div>
        </a>
      </li>
      <li class="col mb-4" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#usb-plug-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">usb-plug-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#usb-symbol"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">usb-symbol</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="love romance valentine" data-categories="love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#valentine"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">valentine</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="love romance valentine" data-categories="love">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#valentine2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">valentine2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="graphics vector pen" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#vector-pen"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">vector-pen</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="view rearrange" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#view-list"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">view-list</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="view rearrange" data-categories="ui and keyboard">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#view-stacked"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">view-stacked</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#vimeo"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">vimeo</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio music record">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#vinyl"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">vinyl</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio music record" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#vinyl-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">vinyl-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="voicemail message telephone" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#voicemail"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">voicemail</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av sound" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#volume-down"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">volume-down</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av sound" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#volume-down-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">volume-down-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av sound" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#volume-mute"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">volume-mute</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av sound" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#volume-mute-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">volume-mute-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av sound" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#volume-off"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">volume-off</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av sound" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#volume-off-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">volume-off-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av sound" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#volume-up"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">volume-up</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="audio video av sound" data-categories="media">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#volume-up-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">volume-up-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="divider vertical-rule" data-categories="typography">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#vr"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">vr</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cards money funds cash payment" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#wallet"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">wallet</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cards money funds cash payment" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#wallet-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">wallet-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="cards money funds cash payment" data-categories="commerce">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#wallet2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">wallet2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="wearables clock" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#watch"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">watch</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="waves levels" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#water"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">water</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="camera video" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#webcam"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">webcam</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="camera video" data-categories="devices">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#webcam-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">webcam-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social facebook chat" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#whatsapp"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">whatsapp</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="internet network wireless" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#wifi"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">wifi</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="internet network wireless" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#wifi-1"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">wifi-1</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="internet network wireless" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#wifi-2"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">wifi-2</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="internet network wireless" data-categories="communications">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#wifi-off"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">wifi-off</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="windy breeze" data-categories="weather">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#wind"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">wind</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="app application" data-categories="layout">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#window"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">window</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="application desktop app" data-categories="apps">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#window-dash"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">window-dash</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="application desktop app" data-categories="apps">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#window-desktop"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">window-desktop</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="application desktop os" data-categories="apps">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#window-dock"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">window-dock</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="application desktop app" data-categories="apps">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#window-fullscreen"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">window-fullscreen</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="application desktop app" data-categories="apps">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#window-plus"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">window-plus</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="application desktop" data-categories="apps">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#window-sidebar"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">window-sidebar</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="application desktop app" data-categories="apps">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#window-split"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">window-split</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="application desktop app windows" data-categories="apps">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#window-stack"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">window-stack</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="application desktop app" data-categories="apps">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#window-x"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">window-x</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="microsoft msft windows" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#windows"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">windows</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#wordpress"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">wordpress</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="tool" data-categories="tools">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#wrench"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">wrench</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="tool" data-categories="tools">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#wrench-adjustable"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">wrench-adjustable</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="tool" data-categories="tools">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#wrench-adjustable-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">wrench-adjustable-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="tool" data-categories="tools">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#wrench-adjustable-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">wrench-adjustable-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="x delete reset clear cancel close exit" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#x"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">x</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="x delete reset clear cancel close exit" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#x-circle"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">x-circle</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="x delete reset clear cancel close exit" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#x-circle-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">x-circle-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="x delete reset clear cancel close exit" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#x-diamond"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">x-diamond</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="x delete reset clear cancel close exit" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#x-diamond-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">x-diamond-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="x delete reset clear cancel close exit" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#x-lg"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">x-lg</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="x delete reset clear cancel close exit" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#x-octagon"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">x-octagon</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="x delete reset clear cancel close exit" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#x-octagon-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">x-octagon-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="x delete reset clear cancel close exit" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#x-square"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">x-square</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="x delete reset clear cancel close exit" data-categories="alerts, warnings, and signs">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#x-square-fill"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">x-square-fill</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="microsoft gaming" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#xbox"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">xbox</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="peace" data-categories="real world">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#yin-yang"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">yin-yang</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="social video google" data-categories="brand">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#youtube"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">youtube</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="magnify scale" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#zoom-in"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">zoom-in</div>
        </a>
      </li>
      <li class="col mb-4" data-tags="minify scale" data-categories="graphics">
        <a class="d-block text-dark text-decoration-none" href="javascript:;">
          <div class="p-3 py-4 mb-2 bg-light text-center rounded">
            <svg class="bi" width="1em" height="1em" fill="currentColor">
              <use xlink:href="bootstrap-icons.svg#zoom-out"></use>
            </svg>
          </div>
          <div class="name text-muted text-decoration-none text-center pt-1">zoom-out</div>
        </a>
      </li>
  </ul>
</div>


      <p><a name="install"></a></p>
<h2 id="安装">安装</h2>
<p>Bootstrap 图标库 已被发布到了 npm，但是仍然可以手动下载并安装。</p>
<div class="row my-4">
  <div class="col-md-4">
<h3 id="通过-npm-安装">通过 npm 安装</h3>
<p>通过 npm 安装 <a href="javascript:;">Bootstrap 图标库</a>，包括 SVG 图片、sprite 图标和图标字体。然后，请参考 <a href="#usage">用法指南</a> 选择并使用你所需要的图标。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh">npm i bootstrap-icons</code></pre></div>

  </div>
  <div class="col-md-4">
<h3 id="下载安装包">下载安装包</h3>
<p><a href="javascript:;">GitHub 上有所有已发布的版本</a>，并且在压缩包内包含了所有 SVG 格式的图标、许可证和 readme 文件。<code>package.json</code> 文件也被包含在内，不过这些 npm 脚本主要用于我们的开发流程。</p>
<p><a class="btn btn-outline-primary" href="javascript:;">下载最新版本的 ZIP 压缩包</a></p>

  </div>
  <div class="col-md-4">
<h3 id="通过公共-cdn-加载">通过公共 CDN 加载</h3>
<p>利用我们提供的公共 CDN 服务并将图标字体的样式表添加到网站的 <code>&lt;head&gt;</code> 标签内（或通过 CSS 的 <code>@import</code> 指令加载）就能立即使用 Bootstrap 图标库了。 <a href="#icon-font">参见图标字体相关文档</a> 以查看示例用法。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css&#34;</span><span class="p">&gt;</span></code></pre></div>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="p">@</span><span class="k">import</span> <span class="nt">url</span><span class="o">(</span><span class="s2">&#34;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css&#34;</span><span class="o">)</span><span class="p">;</span></code></pre></div>

  </div>
</div>
<p><a name="usage"></a></p>
<h2 id="用法">用法</h2>
<p>Bootstrap 图标库的所有图标都是 SVG 格式的，因此你可以通过以下几种方式将它们添加到你的 HTML 中，具体使用哪种方式取决于你的项目是如何设置的。我们建议设置 <code>width: 1em</code>（以及可选的 <code>height: 1em</code>），便于你通过 <code>font-size</code> 属性重置图标的大小。</p>
<div class="row my-4">
  <div class="col-md-4">
<h3 id="内嵌">内嵌</h3>
<p>将图标嵌入你的 HTML 页面中（与引用外部图像文件相反）。如下例子中我们对 <code>width</code> 和 <code>height</code> 属性进行了重新设置。
  </p></div>
  <div class="col-md-8">
    <div class="bd-example"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chevron-right" viewbox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path></svg></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">svg</span> <span class="na">xmlns</span><span class="o">=</span><span class="s">&#34;http://www.w3.org/2000/svg&#34;</span> <span class="na">width</span><span class="o">=</span><span class="s">&#34;32&#34;</span> <span class="na">height</span><span class="o">=</span><span class="s">&#34;32&#34;</span> <span class="na">fill</span><span class="o">=</span><span class="s">&#34;currentColor&#34;</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bi bi-chevron-right&#34;</span> <span class="na">viewBox</span><span class="o">=</span><span class="s">&#34;0 0 16 16&#34;</span><span class="p">&gt;&lt;</span><span class="nt">path</span> <span class="na">fill-rule</span><span class="o">=</span><span class="s">&#34;evenodd&#34;</span> <span class="na">d</span><span class="o">=</span><span class="s">&#34;M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z&#34;</span><span class="p">/&gt;&lt;/</span><span class="nt">svg</span><span class="p">&gt;</span></code></pre></div>
  </div>
</div>
<div class="row my-4">
  <div class="col-md-4">
<h3 id="sprite">Sprite</h3>
<p>利用 SVG sprite 和 <code>&lt;use&gt;</code> 元素即可插入任何图标。使用图标的文件名作为片段标识符（例如 <code>toggles</code> 就是 <code>#toggles</code>）。SVG sprites 允许你像 <code>&lt;img&gt;</code> 元素一样引用外部文件，并支持 <code>currentColor</code> 的功能以便主题化。</p>
<p><strong>注意！</strong> 在 chrome 浏览器中，<a href="javascript:;"><code>&lt;use&gt;</code> 不能跨域使用</a>。</p>

  </div>
  <div class="col-md-8">
<div class="bd-example">
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart-fill"></use>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#toggles"></use>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#shop"></use>
</svg>
</div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bi&#34;</span> <span class="na">width</span><span class="o">=</span><span class="s">&#34;32&#34;</span> <span class="na">height</span><span class="o">=</span><span class="s">&#34;32&#34;</span> <span class="na">fill</span><span class="o">=</span><span class="s">&#34;currentColor&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">&#34;bootstrap-icons.svg#heart-fill&#34;</span><span class="p">/&gt;</span>
<span class="p">&lt;/</span><span class="nt">svg</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bi&#34;</span> <span class="na">width</span><span class="o">=</span><span class="s">&#34;32&#34;</span> <span class="na">height</span><span class="o">=</span><span class="s">&#34;32&#34;</span> <span class="na">fill</span><span class="o">=</span><span class="s">&#34;currentColor&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">&#34;bootstrap-icons.svg#toggles&#34;</span><span class="p">/&gt;</span>
<span class="p">&lt;/</span><span class="nt">svg</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bi&#34;</span> <span class="na">width</span><span class="o">=</span><span class="s">&#34;32&#34;</span> <span class="na">height</span><span class="o">=</span><span class="s">&#34;32&#34;</span> <span class="na">fill</span><span class="o">=</span><span class="s">&#34;currentColor&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">&#34;bootstrap-icons.svg#shop&#34;</span><span class="p">/&gt;</span>
<span class="p">&lt;/</span><span class="nt">svg</span><span class="p">&gt;</span></code></pre></div>
  </div>
</div>
<div class="row my-4">
  <div class="col-md-4">
<h3 id="作为外部图片文件引用">作为外部图片文件引用</h3>
<p>将 Bootstrap 图标库 的 SVG 文件复制到你所选择的目录中，并像引用普通图片一样通过 <code>&lt;img&gt;</code> 元素引入 SVG 图标。
  </p></div>
  <div class="col-md-8">
    <div class="bd-example"><img src="static/picture/bootstrap.svg" alt="Bootstrap" width="32" height="32"></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;/assets/img/bootstrap.svg&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;Bootstrap&#34;</span> <span class="na">width</span><span class="o">=</span><span class="s">&#34;32&#34;</span> <span class="na">height</span><span class="o">=</span><span class="s">&#34;32&#34;</span><span class="p">&gt;</span></code></pre></div>
  </div>
</div>
<div class="row my-4">
  <div class="col-md-4">
<h3 id="图标字体">图标字体</h3>
<p>Bootstrap 图标库还提供了图标字体文件，并且包括了每个图标及其对应 class 名称。通过在页面中引入图标字体文件，然后根据需要为 HTML 标签添加对应的 class 名称即可（例如 <code>&lt;i class=&quot;bi-alarm-clock&quot;&gt;&lt;/i&gt;</code>）。</p>
<p>使用 <code>font-size</code> 和 <code>color</code> 样式属性可以更改图标的外观。</p>

  </div>
  <div class="col-md-8">
    <div class="bd-example"><i class="bi-alarm"></i></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bi-alarm&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">i</span><span class="p">&gt;</span></code></pre></div>
    <div class="bd-example"><i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bi-alarm&#34;</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;font-size: 2rem; color: cornflowerblue;&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">i</span><span class="p">&gt;</span></code></pre></div>
  </div>
</div>
<div class="row">
  <div class="col-md-4">
<h3 id="css">CSS</h3>
<p>你还可以在 CSS 中使用 SVG 图标（当指定十六进制颜色值时 <strong>务必对某些字符进行转义</strong>，例如将 <code>#</code> 字符替换为 <code>%23</code>）。如果未指定 <code>&lt;svg&gt;</code> 元素的 <code>width</code> 和 <code>height</code> 属性，则图标将填满所有可用空间。</p>
<p>如果需要使用 <code>background-size</code> 来调整图标的大小，则必须设置 <code>viewBox</code> 属性。请注意，<code>xmlns</code> 属性是必需的。</p>

  </div>
  <div class="col-md-8">
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">bi</span><span class="p">::</span><span class="nd">before</span> <span class="p">{</span>
  <span class="k">display</span><span class="p">:</span> <span class="kc">inline-block</span><span class="p">;</span>
  <span class="k">content</span><span class="p">:</span> <span class="s2">&#34;&#34;</span><span class="p">;</span>
  <span class="k">vertical-align</span><span class="p">:</span> <span class="mf">-.125</span><span class="kt">em</span><span class="p">;</span>
  <span class="k">background-image</span><span class="p">:</span> <span class="nb">url</span><span class="p">(</span><span class="s2">&#34;data:image/svg+xml,&lt;svg viewBox=&#39;0 0 16 16&#39; fill=&#39;%23333&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;&gt;&lt;path fill-rule=&#39;evenodd&#39; d=&#39;M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z&#39; clip-rule=&#39;evenodd&#39;/&gt;&lt;/svg&gt;&#34;</span><span class="p">);</span>
  <span class="k">background-repeat</span><span class="p">:</span> <span class="kc">no-repeat</span><span class="p">;</span>
  <span class="k">background-size</span><span class="p">:</span> <span class="mi">1</span><span class="kt">rem</span> <span class="mi">1</span><span class="kt">rem</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
  </div>
</div>
<div class="row my-4">
  <div class="col-md-4">
<p><a name="styling"></a></p>
<h2 id="设置样式">设置样式</h2>
<p>可以通过设置 <code>.text-*</code> 类或自定义 CSS 来改变颜色：</p>

  </div>
  <div class="col-md-8">
    <div class="bd-example">
      <svg class="bi bi-exclamation-triangle text-success" width="32" height="32" fill="currentColor" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"></path>
        <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"></path>
      </svg>
    </div>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bi bi-exclamation-triangle text-success&#34;</span> <span class="na">width</span><span class="o">=</span><span class="s">&#34;32&#34;</span> <span class="na">height</span><span class="o">=</span><span class="s">&#34;32&#34;</span> <span class="na">fill</span><span class="o">=</span><span class="s">&#34;currentColor&#34;</span> <span class="na">viewBox</span><span class="o">=</span><span class="s">&#34;0 0 16 16&#34;</span> <span class="na">xmlns</span><span class="o">=</span><span class="s">&#34;http://www.w3.org/2000/svg&#34;</span><span class="p">&gt;</span>
  ...
<span class="p">&lt;/</span><span class="nt">svg</span><span class="p">&gt;</span></code></pre></div>
  </div>
</div>
<div class="row my-4">
  <div class="col-md-4">
<h2 id="无障碍">无障碍</h2>
<p>对与纯装饰性图标，请添加 <code>aria-hidden=&quot;true&quot;</code> 属性。否则，请提供适当的替代性文本。根据添加图标的方法和使用位置（例如，作为独立的图片，或者作为按钮等类似组件上的唯一内容），有多种使用方式。以下是几个示例：
  </p></div>
  <div class="col-md-8">
    <div class="bd-example">
      <img src="static/picture/bootstrap.svg" alt="Bootstrap" width="32" height="32">
    </div>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c">&lt;!-- alt=&#34;...&#34; on &lt;img&gt; element --&gt;</span>
<span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;/assets/img/bootstrap.svg&#34;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&#34;Bootstrap&#34;</span> <span class="err">...</span><span class="p">&gt;</span></code></pre></div>
    <div class="bd-example">
      <i class="bi-github" role="img" style="font-size: 2em" aria-label="GitHub"></i>
    </div>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bi-github&#34;</span> <span class="na">role</span><span class="o">=</span><span class="s">&#34;img&#34;</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">&#34;GitHub&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">i</span><span class="p">&gt;</span></code></pre></div>
    <div class="bd-example">
      <svg class="bi" width="32" height="32" fill="currentColor" role="img" aria-label="Tools">
        <use xlink:href="bootstrap-icons.svg#tools"></use>
      </svg>
    </div>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bi&#34;</span> <span class="err">...</span> <span class="na">role</span><span class="o">=</span><span class="s">&#34;img&#34;</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">&#34;Tools&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">&#34;bootstrap-icons.svg#tools&#34;</span><span class="p">/&gt;</span>
<span class="p">&lt;/</span><span class="nt">svg</span><span class="p">&gt;</span></code></pre></div>
    <div class="bd-example">
      <button type="button" class="btn btn-primary" aria-label="Mute">
        <svg class="bi bi-volume-mute-fill" width="32" height="32" viewbox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M6.717 3.55A.5.5 0 017 4v8a.5.5 0 01-.812.39L3.825 10.5H1.5A.5.5 0 011 10V6a.5.5 0 01.5-.5h2.325l2.363-1.89a.5.5 0 01.529-.06zm7.137 2.096a.5.5 0 010 .708L12.207 8l1.647 1.646a.5.5 0 01-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 01-.708-.708L10.793 8 9.146 6.354a.5.5 0 11.708-.708L11.5 7.293l1.646-1.647a.5.5 0 01.708 0z"></path></svg>
      </button>
    </div>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="c">&lt;!-- aria-label=&#34;...&#34; on the control --&gt;</span>
<span class="p">&lt;</span><span class="nt">button</span> <span class="err">...</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">&#34;Mute&#34;</span><span class="p">&gt;</span>
  <span class="p">&lt;</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;bi bi-volume-mute-fill&#34;</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">&#34;true&#34;</span> <span class="err">...</span><span class="p">&gt;</span>
  ...
  <span class="p">&lt;/</span><span class="nt">svg</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span></code></pre></div>
  </div>
</div>
<div class="row my-4">
  <div class="col-md-4">
<h2 id="svg-相关问题">SVG 相关问题</h2>
<p>SVG 是非常棒的技术，但仍然存在一些需要处理的怪异行为。考虑到 SVG 有多种使用方式，我们在代码中没有包含以下这些属性和处理手段。
  </p></div>
  <div class="col-md-8">
<p>已知问题包括：</p>
<ul>
<li>
<p><strong>在 Internet Explorer 和 旧版本的 Edge 浏览器钟 SVG 可以获取焦点。</strong> 在嵌入 SVG 时，请为 <code>&lt;svg&gt;</code> 元素添加 <code>focusable=&quot;false&quot;</code> 属性。 <a href="javascript:;">在 Stack Overflow 上有详细解释。</a></p>
</li>
<li>
<p><strong>当 SVG 与 <code>&lt;img&gt;</code> 元素一起使用时，屏幕阅读器可能不会将它们视为图片来处理，也可能会完全跳过这类图片。</strong> 为 <code>&lt;img&gt;</code> 元素设置 <code>role=&quot;img&quot;</code> 可以避免此类问题。 <a href="javascript:;">详情请见此篇文章</a></p>
</li>
<li>
<p><strong>引用外部的 SVG sprites 图可能在 Internet Explorer 浏览器中无法正常使用。</strong> 请根据需要使用 <a href="javascript:;">svg4everybody</a> polyfill。</p>
</li>
</ul>
<p>如果您发现了其他应该引起注意的问题，请向我们提交<a href="javascript:;">一个 issue</a> 并详细说明问题。</p>

  </div>
</div>

    </main><footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-left">
  <div class="container">
    <ul class="bd-footer-links">
      <li><a href="javascript:;">GitHub</a></li>
      <li><a href="javascript:;">Twitter</a></li>
      <li><a href="javascript:;">关于</a></li>
    </ul>
    <p>当前版本 <a href="javascript:;">v1.8.1</a>. Icons and documentation licensed <a href="javascript:;" target="_blank" rel="license noopener">MIT</a>.</p>
  </div>
</footer>

<script src="static/js/list.min.js"></script>
<script>
  new List('icons-body', {
    valueNames: ['name', { data: ['tags', 'categories'] }]
  });
</script>
<script async="" src="static/js/application.min.js"></script>

  </body>
</html>
